ajax知识点总结

ajax各参数

 $.ajax({
        url: "test.json",
        type: "get",
        cache: false,
        async: false,
　　　　 data: null,
        beforeSend: function (request) {
            console.log(request);
            console.log("请求之前");
        },
        complete: function (request, testStatus) {
            console.log("\n");
            console.log("请求完成");
            console.log(request);
            console.log(testStatus);
        },
        success: function (data,textStatus, request) {
            console.log("\n");
            console.log("请求成功");
            console.log(data);
        },
        error: function (request, textStatus, errorThrown) {
            console.log("\n");
            console.log("请求出错");
            console.log(request);
            console.log(textStatus);
            console.log(errorThrown);
        },
        dataType: "json",
        dataFilter: function (data, type) {
            console.log("\n");
            console.log("拦截成功");
            console.log("拦截的数据为："+data);
            console.log("拦截的数据类型为："+type);
        }
    })

url：
请求的地址，上面的代码是我模拟的json数据，单独挡在了test.json中，当我们向服务器进行请求时，把这个url换成对应的url就行，注意，url后面是一个字符串，我刚开始学习ajax的时候就是总忘写那对双引号。

type：
请求的类型，就是get请求还是post请求，当然，也可以为其它，但是前提是浏览器必须也得支持。默认为get。

cache：
请求时是否使用浏览器缓存的数据，默认为true，即开启缓存。当dataType为xml时，默认为false。

data: 
请求的数据，如果是get方式请求，就是拼接在url问号后面的参数，post请求就是在请求参数中的内容。

async：
是否开启异步请求，默认为true，我认为，把这个改为false的，都是脑袋里有炮，既然都用ajax了，寻求的就是异步的那种快感。

beforeSend：
这里的value为一个函数，就是当请求之前执行的函数，这个函数里有一个参数，就是XMLHttpRequest，这个是一些请求的信息，如果此函数返回false，此次请求就会被取消。

complete：
当请求处理完成之后（success执行完之后）执行的函数，参数为XMLHttpRequest和textStatus，第一个参数和之前的相同，第二个参数为请求的状态，即error或者success。

success：
请求成功执行的函数，参数为data、textStatus、XMLHttpRequest，data就是请求回来的数据。

error: 
当请求失败时执行的函数，参数为XMLHttpRequest， textStatus、errorThrown，error打印出来的信息就像是java抛出来异常的打印堆栈的信息。

dataType：
期望被请求方返回的数据类型，常见的有html、xml、json、jsoup、text、script。

dataFilter：
这个是拦截器，和servlet中的filter是一样的，回拦截到被请求方返回的数据，data就是被拦截的数据，而type就是dataType中填写的内容

ajax的作用:（option 发送http请求

@option： 对象

@method： String get/post 表示请求方式

@url : string 表示 请求地址

@data : object 表示请求参数

@success: function 表示请求成功后，如何处理响应数据

@error : function 表示请求失败后，如何处理失败请求

@async : boolean 表示请求的程序(异步还是同步)

ajax做数据持久化处理

1)客户端产生的事件
2)创建XMLHttpRequest对象
3)对XMLHttpRequest进行配置
4)通过AJAX引擎发送异步请求
5)服务器端接收请求并且处理请求，返回html或者xml内容
6)XML调用一个callback()处理响应回来的内容
7)页面的局部刷新

或者 也可以像下面解释

1.创建XMLHttpRequest对象,也就是创建一个异步调用对象
2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3.设置响应HTTP请求状态变化的函数
4.发送HTTP请求
5.获取异步调用返回的数据
6.使用JavaScript和DOM实现局部刷新

ajax中的get和post

get和post都是数据提交的方式。
get的数据是通过网址问号后边拼接的字符串进行传递的。post是通过一个HTTP包体进行传递数据的。
get的传输量是有限制的，post是没有限制的。
get的安全性可能没有post高，所以我们一般用get来获取数据，post一般用来修改数据。

ajax 的 同步 和 异步

我们在使用 ajax 一般都会使用异步处理。

异步处理 ：就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。

同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。

 

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果

封装ajax

function ajax(option) {
           
            
    // 1、获取需要的数据：方法、地址、参数、callback
	var {method,data,url,success,error,async} = option;
    // 2 发送请求对象  分4步
    // 2.1获取实例化对象

    var xhr = new XMLHttpRequest();
    // 2.2如果是get请求
    if (method === "GET" || method === "get") {
        // 1发送get请求
        // 1.1 处理请求地址 和 请求参数
    	url += "?";
        for (var key in data) {
        	url += `${key}=${data[key]}&`
        }
        url = url.slice(0, url.length - 1);
        console.log(url);
        // 以上为处理 想要的url地址（url+data的处理）
        xhr.open(method, url, async);
        xhr.send();
        // 2.3  处理响应
        xhr.onreadystatechange = function () {
           if (xhr.status == 200 && xhr.readyState == 4) {
            // 请求成功
            // 获取响应数据
               var res = xhr.response;
               // 请求成功后，执行成功处理函数
               success(res);
            } else {
                // 请求失败后，执行失败处理函数
                //  失败情况多，返回xhr对象
                error(xhr)
             }
        }
    }
    if (method === "POST" || method === "post") {
        var para = "";
        for (var key in data) {
             para += `${key}=${data[key]}&`
        }
        para = para.slice(0, para.length - 1);
        console.log(para);
        xhr.open(method, url, true);
        xhr.send(para);
        xhr.onreadystatechange = function () {
            if (xhr.status == 200 && xhr.readyState == 4) {
                // 请求成功
                var res = xhr.response;
                success(res);
            } else {
                  error(xhr)
            }
        }
    }
}