五十 Ajax

五十章 — Ajax和jQuery

一、理解Ajax技术原理

AJAX(Asyn)

可以对网页莫部分进行更新（）局部刷新

同步请求（传统请求）：它是浏览器来帮助我们发送的一个请求，然后得到一个页面的完整响应（页面内容重新加载一次）

异步请求： 浏览器借助Ajax核心引擎（XmlHttpRequest对象）来发送请求，得到数据之后再次通过xhr引擎来对数据进行处理接收，然后将其借助DOM操作展示在页面上

[外链图片转存失败(img-VPEmpfNa-1563030302149)(assets/1562809452719.png)]

2.传统请求与异步请求的区别：【面试题】

[外链图片转存失败(img-rxPRT8x4-1563030302151)(assets/1562809573489.png)]

二、理解原生Ajax的使用方式

1.API-XMLHttpRequest对象

• Open(method请求方式，url请求地址，是否一部默认为true表示异步请求)

  如果是GET请求，请求参数可以通过url地址栏传递

  如果是POST请求，请求参数需要通过send

• send（请求参数）

• setRequestHeader（） 设置请求头信息

[外链图片转存失败(img-Mci9JMkh-1563030302153)(assets/1562810065762.png)]

• onreadystaechange（onReadeyState（就绪码/状态）Change）：当就绪吗该百年的时候就会触发此事件
• readstate：就绪码 在他里面存储着当前xhr请求的状态信息

[外链图片转存失败(img-ScMaDTtZ-1563030302153)(assets/1562810239459.png)]

• status：HTTP协议的状态码
• statysText 等价于状态码，只不过是对应的提示词 例如：200 == ok 404 == not found

[外链图片转存失败(img-EEeRodmy-1563030302155)(assets/1562810351444.png)]

• responseText： 它是xhr对象用来将相应回来的数据转换为文本的一个属性
• responseXML…

2.案例：用户名验证（是否重复 ）

[外链图片转存失败(img-PULNTfUo-1563030302156)(assets/1562810904705.png)]

// 使用Ajax来发送请求 验证逻辑
var xhr = new XMLHttpRequest();
var url = "user?username="+username;
// 1.发送请求信息
xhr.open("GET",url);
xhr.send(null);

// 2.接收响应信息
// 绑定readyState改变事件 监测结果
xhr.onreadystatechange = function(){
    // readyState 为 4表示xhr接收响应结束
    // status 为 200 表示响应成功(服务器处理成功)
    if(xhr.readyState == 4 && xhr.status == 200){
        // 将响应数据转换为文本
        var data = xhr.responseText;
        if(data == "yes"){ // yes 能用  no 不能用
            tip.innerHTML = "<font color='lawngreen'>用户名可以使用！</font>";
        }else{
            tip.innerHTML = "<font color='red'>这个名称太抢手！</font>";
        }
    }
};
	

// POST请求
// 1.发送请求信息
xhr.open("POST",url);
// POST请求需要设置此请求头  如果需要文件上传 也是将其进行更改
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+username);
.....略

如果你需要在IE 6 7 8这些浏览器中使用XHR(Ajax引擎)，那么需要特别的处理方式。【解决兼容性问题】

function getXmlHttpRequest(){
    if(window.XmlHttpRequest){
        return new XmlHttpRequest();
    }else{
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

三、掌握jQuery对Ajax技术的封装

// Ajax请求 验证用户名
// 等价于xhr的open() type：请求方式 url：请求地址 async：默认为true 异步请求
$.ajax({
    type:"post",
    // url:"user?username="+username,
    url:"user",
    data:"username="+username,
    async:true,
    dataType:"text", // 等价于xhr.responseText
    success:function(data){ // 它等价于 if(readyState == 4 && status == 200)
        if(data == "yes"){ // yes 能用  no 不能用
            $("#tip").html("<font color='lawngreen'>用户名可以使用！</font>");
        }else{
            $("#tip").html("<font color='red'>这个名称太抢手！</font>");
        }
    },
    error:function(){ // 出现404  500等错误时会触发
        alert("服务器繁忙！请重试！");
    }
});

四、掌握JSON的使用

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它是基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

更多参考：https://www.json.cn/wiki.html

// JSON字符串
var str = "周一";
// JSON数组-字符串数组
var jsonArr = ["张三","李四","王五"];
// 对象
var jsonObj = {"username":"小明","age":11,"gender":"男"};
// JSON数组-对象数组
var jsonObjArr = [
                    {
                        "username":"小红",
                        "age":11
                    },
                    {
                        "username":"小白",
                        "age":10
                    }
                ];

var jsonStrArr = ["北京","上海","天津"];
for(var i = 0; i < jsonStrArr.length; i++){
    $("#arr1").append("<li>"+jsonStrArr[i]+"</li>");
}

// -----------------------------------
var jsonObj = {"username":"小花","age":12};
$("#obj1").append("用户名："+jsonObj.username+"<br/>");
$("#obj1").append("年龄："+jsonObj.age+"<br/>");

// -----------------------------------
var jsonObjArr = [
    {
        "username":"小花",
        "age":11
    },
    {
        "username":"小绿",
        "age":10
    }
];
for(var i = 0; i < jsonObjArr.length; i++){
    var user = jsonObjArr[i];
    var tr = "<tr>"
    +"<td>"+user.username+"</td>"
    +"<td>"+user.age+"</td>"
    +"</tr>";
    $("#objTable").append(tr);
}