Ajax和jQuery

Ajax和jQuery

可能有些难度，难度就在JS操作这块。

1. 理解Ajax技术原理

1.1 Ajax介绍

AJAX（Asynchronous JavaScript And XML）（异步JavaScript和XML）可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分进行更新(局部刷新)。

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

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

1.2 Ajax和传统请求的区别【面试题】

2. [了解] 原生Ajax的使用方式：今天敲一遍即可

2.1 API-XMLHttpRequest对象

• open(method请求方式,url请求地址,是否异步默认为true表示异步请求)

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

  如果是POST请求，请求参数需要通过下方的**send()**方法来指定。

• send(请求参数)

• setRequestHeader() 设置请求头信息

• **onreadystatechange(onReadyState（就绪码/状态）Change) ：**当就绪码改变的时候就会触发此事件

• readyState 就绪码 在它里面存储着当前xhr请求的状态信息

  [外链图片转存失败(img-ny1GMGHa-1564897278315)(D:/bdqn/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E7%AB%A0%EF%BC%9AMYSQL,DAO,HTML/day58-Ajax%E5%92%8CjQuery/02_note/assets/1562810239459.png)]

• status HTTP协议的状态码

• statusText 等价于状态码 只不过是对应的 提示文本形式 例如：200 == OK 404 Not Found

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

• responseXML…

  …

2.2 案例：用户名验证(是否重复)

// 使用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");
    }
}

3. 掌握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("服务器繁忙！请重试！");
    }
});

4. 掌握JSON的使用【重要而且简单】

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

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

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);
}