AJAX发送请求与响应-jQuery中ajax的使用-node初级（五）

AJAX简介：

        AJAX即异步JavaScript与XML技术，是一套综合了多项技术的浏览器端网络开发技术。

        简单来说，AJAX就是使用JavaScript代码发送网络请求并处理响应，有浏览器即客户端实现。

        ajax技术能够在页面不刷新的情况下，和服务器端进行交互，可以仅向服务器发送并取回必须的数据，并在客户端采用js处理响应。交换的数据大大减少，服务器的响应更加迅速，把数据处理工作放到了客户端进行，减少了web服务器的负荷。

        特点：异步请求，局部刷新

        异步是指：发送数据后，不等待响应，直接发送下一个数据包

---

AJAX书写步骤：

1、创建AJAX对象

2、设置请求路径，请求方式

3、绑定监听状态改变的处理函数，在处理函数可获取响应数据

4、发送请求

但是注意，创建ajax对象会有浏览器兼容性问题：

function createAjax() {
    var ajax;
    try {       // 非 IE 
        ajax = new XMLHttpRequest();
    }
    catch (e) { // IE
        ajax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return ajax;
}

响应处理与响应流程：

        响应处理是服务端响应客户端的数据，根据状态码和ajax对象的状态信息进行不同的处理。

        ajax对象有四个属性：

1、readyState:共5个状态，0-4，每个值代表不同的含义：

        0：初始化，ajax对象还没有完成初始化

        1：载入，ajax对象开始发送请求

        2：载入完成，ajax对象的请求发送完成

        3：解析，ajax对象开始读取服务器的响应

        4：完成，ajax对系读取服务器的响应结束

2、status表示响应的HTTP状态码：

        200：成功

        302：重定向

        404：找不到资源

        500：服务端错误

3、responseText获得字符串形式的响应数据

4、rersponseXML获取XML形式的响应数据

        我们可以知道，在状态改变的处理函数一般针对readyState==4且status==200的情况才处理。

利用AJAX发送get请求

前端js代码：

<script>
    let obtn = document.getElementById("obtn");
    let odiv = document.getElementById("odiv");

    obtn.onclick = () => {

        //发送ajax请求
        // 1、创建 AJAX 对象；
        let ajax = new XMLHttpRequest();

        // 2、设置请求路径，请求方式等；ajax.open(请求方式，路径)
        ajax.open('GET', '/get_data');
        // 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据；
        ajax.onreadystatechange = ()=>{
            // 获取响应回来的数据
            if(ajax.readyState===4&& ajax.status===200){
                console.log(ajax.readyState);
                console.log(ajax.responseText);
                // 请求到数据之后，就可以把数据更新到页面上
                odiv.innerHTML = ajax.responseText;
            }
        };
        // 4、发送请求。
        ajax.send()
    }
</script>

服务端代码：

else if(requestUrl=== "/get_data"){       //或者写成：/get_data.*/.test(requestUrl)
    response.setHeader("Content-type","text/html;charset=utf-8");
    response.write("这个数据是来自服务器的...");
    response.end();
}

避免缓存：

        为了保证我们读取的信息都是最新的，我们要禁止他的缓存功能，解决方法如下

• 在 URL 后面加上一个随机数：Math.random()。

• 在 URL 后面加上时间搓：new Date().getTime()。

• 在使用 AJAX 发送请求前加上 ajax.setRequestHeader('Cache-Control', 'no-cache')。

ajax.open( ..... );
ajax.setRequestHeader('Cache-Control', 'no-cache');
ajax.send();

利用AJAX发送post请求

前端代码：

<script>
    let obtn = document.getElementById("obtn");
    let odiv = document.getElementById("odiv");
    obtn.onclick = () => {
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        let params = `username=${username}&password=${password}`;
        //发送ajax请求
        // 1、创建 AJAX 对象；
        let ajax = new XMLHttpRequest();

        // 2、设置请求路径，请求方式等；ajax.open(请求方式，路径)
        ajax.open('POST', '/login_post');
        
        ajax.setRequestHeader("enctype","application/x-www-form-urlencoded");
        // 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据；
        ajax.onreadystatechange = ()=>{
            // 获取响应回来的数据
            if(ajax.readyState===4&& ajax.status===200){
                console.log(ajax.readyState);
                console.log(ajax.responseText);
                // 请求到数据之后，就可以把数据更新到页面上
                odiv.innerHTML = ajax.responseText;
            }
        };
        // 4、发送请求。
        ajax.send(params)
    }
</script>

服务端代码：

else if(requestUrl=== "/login_post"){   //来处理css文件的请求   如果这个路径包含.css
    request.on('data',(postData)=>{
        let uname = postData.toString().split("&")[0].split("=")[1];   // 获取用户提交的用户名
        let pwd = postData.toString().split("&")[1].split("=")[1];    // 获取用户提交的密码

        if(uname===username && pwd===password){
            response.end("账号密码正确，登录成功");
        }else{
            response.end("账号或者密码错误，登录失败");
        }
    });

}

ajax代码的抽取

        我们知道，我们为了后期项目的维护，我们要将项目尽量模块化，所以这个ajax代码如果不能复用，那么代码量将比较大，不利于后期维护该项目，我们将ajax抽取出来成为一个文件，变成一个函数，在需要发送请求时调用即可。

function ajax(mehtod, url, param, success, time){

    var ajax;
    
    //处理ajax获取时候的兼容性问题
    try {       // 非 IE 
        ajax = new XMLHttpRequest();
    }
    catch (e) { // IE
        ajax = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if(method === 'get'){
        param = encodeURI(param);  //针对get请求的查询参数出现中文的编码处理
        url = url + '?' + param;
        param = null;
    }
    
    ajax.open(method, url);

    if(method === 'post'){
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }

    ajax.onreadystatechange = function () { // onload
        if(ajax.readyState == 4 && ajax.status == 200){
            success(ajax.responseText);
        }
    }
    
    ajax.send(param);

    var timer = setTimeout(function () {
        ajax.abort();
    }, time);
}

在jQuery里面使用ajax：

• async：默认设置下，所有请求均为异步请求。

• contentType：发送信息至服务器时内容编码类型，默认为 "application/x-www-form-urlencoded"。

• data：发送到服务器的数据，可以为对象或者 Key=value 格式字符串，若为对象则会自动转换为请求字符串格式。

• type：默认: "GET"，其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但取决浏览器支持。

• url：发送请求的地址，默认当前页地址。

• dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME类型就被识别为 XML，可以不填，可用值："xml"、"html"、"script"、"json"、"jsonp"、"text"。

• cache：默认为 true（dataType 为 script 和 jsonp 时默认为 false，设置为 false 将禁用缓存。

• context：这个对象用于设置 AJAX 相关回调函数的上下文。也就是说，让回调函数内 this 的指向（若不指定为当前选项）。

• beforeSend：发送请求前调用此函数，可用与如添加自定义 HTTP 头，检查请求参数是否合法。XMLHttpRequest 对象是唯一的参数。若在函数中返回 false 可以取消本次请求。

• success：请求成功后的回调函数，参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

• $.ajax({
      url: 'url',
      type: 'GET',
      data: {username:'zs', password:'12345'},
      success: function(data){
          // 请求成功业务逻辑
      }
  });

  使用jQuery发送GET请求

$.get('/get_data', {name:'nodejs', age:11}, function(data){
     //请求成功的业务逻辑(成功之后的操作)
});

     使用jQuery发送POST请求

$.post('url', {username:$("#username").val(), password:$("#password").val()}, function(data){
    // 请求成功业务逻辑
    console.log(data);
});