js Ajax概念和优势 应用跟封装

一、Ajax的概念和优势

Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。

1. 异步 js碰到异步操作时，先执行异步操作（一些代码）后面的代码（和异步操作没有关系的代码），等其他代码执行完成之后，再回头执行异步操作。

• 以setTimeout为例

    //statements
    setTimeout(foo,1000);
    //statements

2. 同步 js正常是按照同步的形式去运行的 从上往下依次执行，比如：在执行中有耗时比较长的代码，等待执行完成之后，再执行后面的。
3. XML 可扩展的标记语言 通常用来表示数据

//xml
<person>
    <name>zhangsan</name>
    <age>lisi</age>
</person>

//json
var person = {
    name:"zhangsan",
    age:20
}

Ajax的好处

通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载。
Ajax最大的特点就是局部刷新。
二、Ajax的创建及操作
1.创建ajax对象

var xhr = new XMLHttpRequest(); //现代浏览器
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");//兼容写法

2. 确定资源（php,html,txt,json,js等）url，请求方式 get/post

open()
xhr.open('get', 'demo.php', true); //对于 demo.php 的 get 请求，false 同步
三个参数： 要发送的请求类型   (get 、post)、请求的 URL 和表示是否异步
get请求不带参数
 xhr.open("get", "demo.php");
 get请求带参数
 xhr.open("get", "demo.php?a=1&b=2");
        //xhr.open("post", "demo.php"); 
        //此时只是做准备工作，请求并没有发送出去，这个也可以通过控制台中的networker来查看

3. 发送请求

在请求资源时，get请求，如果有数据，放到url后面，post请求，如果有数据，作为send方法的参数
Post：xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(data);
 针对于get请求带或者带参数，以及post请求不带参数
        xhr.send();
 如果时post请求并且带参数
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send("a=1&b=2");

4.接收响应的数据 需要借助一个事件 onreadystatechange

readyState  //准备状态
0  请求未初始化  1 服务器连接己建立
2  请求已接收  3 处理请求，响应中
4  响应就绪
        xhr.onreadystatechange = function () {
            //console.log(xhr.readyState);
            if (xhr.readyState == 4) {
                //响应就绪 可以去接收数据
                if (xhr.status == 200) {
                    var data = xhr.responseText;
                    console.log(data);
                    //剩下的工作就是如果操作这个数据，往往数据操作是比较麻烦的
                }
            }
        }

三、status HTTP 状态码

常见状态码
200 - 请求成功
301 -Moved Permanently 资源（网页等）被永久转移到其它URL
304 -Not Modified 使用缓存文档
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
状态码分类
1信息，服务器收到请求，需要请求者继续执行操作 2成功，操作被成功接收并处理
3重定向，需要进一步的操作以完成请求 4客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误

四、ajax封装函数

1.必须掌握的基础封装

function ajax(url, fn) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open("get", url);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var data = xhr.responseText;
                fn(data);
            }
        }
    }
}

2.全面的封装函数

*params*// 需要的参数
1. 请求方式 type get/post
2. 请求路径 url
3. 附加数据 data  key1=val1&key2=val2
4. 回调函数 fn  分为成功时的回调 success  和失败时的回调 fail
//type url data success
function ajax(obj) {//用obj代表要传的参数
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    //在js里常见的键值对表示形式是{key1:val1,key2:val2},
    //但是ajax请求时附加的数据格式 key1=val1&key2=val2
    var str = "";
    for (var key in obj.data) {
    //对附加数据进行处理 改成key1=val1&key2=val2 格式
        str += `${key}=${obj.data[key]}&`;
    }
    //在str后面多一个&符号 替换掉
    str = str.replace(/&$/, "");
    //console.log(str);
    if (obj.type.toLowerCase() == "get") { //但是有的习惯用GET,所以统一转成小写或者大写
        //考虑是否附加数据
        if (str) {
            xhr.open("get", obj.url + "?" + str);
        } else {
            xhr.open("get", obj.url);
        }
        xhr.send();
    }

    if (obj.type.toLowerCase() == "post") {
        xhr.open("post", obj.url);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(str);
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var data = xhr.responseText;
                obj.success(data);
            }
        }
    }
}