原生js的ajax请求

 

传统方法的缺点:

　　传统的web交互是用户触发一个http请求服务器,而后服务器收到以后,在作出响应到用户,而且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,而且哪怕只是一次很小的交互、只需从服务器端获得很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去从新读取整个页面。这个作法浪费了许多带宽，因为每次应用的交互都须要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这致使了用户界面的响应比本地应用慢得多。

 

什么是ajax

　　ajax的出现,恰好解决了传统方法的缺陷。AJAX 是一种用于建立快速动态网页的技术。经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

XMLHttpRequest 对象

　　XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。目前全部浏览器都支持XMLHttpRequest

 

方    法	描    述
abort()	中止当前请求
getAllResponseHeaders()	把HTTP请求的全部响应首部做为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	创建对服务器的调用。method参数能够是GET、POST或PUT。url参数能够是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部以前必须先调用open()。设置header并和请求一块儿发送 ('post'方法必定要 )

五步使用法:

　　1.建立XMLHTTPRequest对象

　　2.使用open方法设置和服务器的交互信息

　　3.设置发送的数据，开始和服务器端交互

　　4.注册事件

　　5.更新界面

下面给你们列出get请求和post请求的例子

get请求:

//步骤一:建立异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,能够带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 若是可以进到这个判断 说明 数据 完美的回来了,而且请求的页面是存在的
  　　}　　　　console.log(ajax.responseText);//输入相应的内容

}

 post请求:

//建立异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求必定要添加请求头才行否则会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

为了方便使用,咱们能够把他封装进方法里面,要用的时候,直接调用就行了

function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  须要分别写不一样的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 若是有值
            url+='?';
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        ajax.open(method,url);

        // send便可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不须要改变
        ajax.open(method,url);

        // 须要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判断data send发送数据
        if (data) {
            // 若是有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送便可
            ajax.send();
        }
    }

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

            // 若是说 外面能够传入一个 function 做为参数 success
            success(ajax.responseText);
        }
    }

}