Ajax基础知识+项目应用案例

一.什么是Ajax，为什么要使用Ajax?

AJAX是“Asynchronous JavaScript and XML”的缩写。

• ① 他是指一种创建交互式网页应用的网页开发技术。

• ②客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术。

---

二.同步、异步交互概念

• 两者区别：一个需要等待，一个不需要等待，在部分情况下，我们的项目开发中都会优先选择不需要等待的异步交互方式。
• 哪些情况建议使用同步交互呢？ 比如银行的转账系统，对数据库的保存操作等等，都会使用同步交互操作，其余情况都优先使用异步交互。

---

三.AJAX实现

• $.ajax()
• $.get(url,params,fn,type) GET方式的异步请求
• $.post(url,params,fn,type) Post方式的异步请求

①url:待载入页面的URL地址
②param:待发送 Key/value 参数。
③fn:载入成功时回调函数。
④type:返回内容格式，xml, html, script, json, text, _default。

• 登录应用ajax案例

• POST请求案例

<script type="text/javascript">
   function login() {
       var loginName = $("#loginName").val();
       var loginPwd = $("#loginPwd").val();
       console.log(loginName+"---"+loginPwd);
       $.post("merchant/login",{loginName:loginName,loginPwd:loginPwd},function (data) {
           console.log(data);
           if(data.code==1){

               window.location.href="/index.html";
           }
       },"json");
   }

</script>

• $.ajax()案例

$.ajax({
    url:"http://www.microsoft.com",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"POST",   //请求方式
    beforeSend:function(){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(){
        //请求完成的处理
    },
    error:function(){
        //请求出错处理
    }
});

• 常用写法

// 常用
$.ajax({
 type:"post",
 url:"",
 data:{},
 dataType:"json",
 success:function(data){
 }
})

四.原生JS中的Ajax原理（五个步骤）

• ①创建异步对象

var xhr = new XMLHttpRequest();

• ②设置 请求行 open(请求方式，请求url):

// get请求如果有参数就需要在url后面拼接参数，xhr.open(“get”,“validate.php?username=”+name)
// post如果有参数，就在请求体中传递
xhr.open(“post”,“validate.php”);

• ③设置请求头:setRequestHeader()
• （GET方式忽略此步骤）

// 1.get不需要设置
// 2.post需要设置请求头：
Content-Type:application/x-www-form-urlencoded
例：xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);

• ④设置请求体 send()

// 1.get的参数在url拼接了，所以不需要在这个函数中设置
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send(null) xhr.send(“username=”+name);

• ⑤让异步对象接收服务器的响应数据
• //一个成功的响应有两个条件： 1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)

xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}

• AJAX的实现原理： Ajax的原理简单来说通过浏览器的javascript对象XMLHttpRequest(Ajax引擎)对象向服务器发送异步请求并接收服务器的响应数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。即用户的请求间接通过Ajax引擎发出而不是通过浏览器直接发出，同时Ajax引擎也接收服务器返回响应的数据，所以不会导致浏览器上的页面全部刷新。

---

We improve ourselves by victories over ourselves

2020.02.29