Ajax在实战中的应用

1.什么是Ajax？

Ajax是一种Web技术，利用客户端脚本(javascript)与服务器端进行的异步交互，实现页面的局部刷新。

同步交互:客户端与服务端通过HTTP协议，实现Request(请求)与Response(响应)的成对出现。

异步交互:在客户端与服务端中间存在一个ajax引擎，客户端在向服务端发送请求的同时，客户端委托给ajax,可以有多个Ajax请求发向服务端发送请求。

2.Ajax的优势

通过异步交互，实现页面的局部刷新。

一面墙上有一个污点，我们是刷新整面墙效率高还是针对某个位置局部粉刷效率高。可想而知，ajax极大的提高了数据的效应数据。

视图页面加载是很快的，但是数据的加载是比较慢的。通过ajax技术，增加ajax请求的个数，这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。

3.Ajax的用法

3.1 原生用法

所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)

第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。

第三步：创建与服务端的连接

第四步：发送异步请求实现与服务端的通讯

 //Ajax方式的请求
 function doAjaxGet(){
    //1.创建XHR对象 
    var xhr=new XMLHttpRequest(); 
    //2.设置状态监听(将服务端响应的结果更新到ajaxResultId位置) 
    xhr.onreadystatechange=function(){  
       if(xhr.readyState==4&&xhr.status==200){
         console.log(xhr.responseText);
         document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
       }
    };
     //3.建立连接         
     xhr.open("GET","http://localhost/doGet",**true**);
     //true表示异步(底层会启动线程与服务端通讯)  
     //4.发送请求 
     xhr.send();

}
 

这种原始方式，重复代码过多，极大的降低了我们的开发效率。接下来我们使用框架，框架会提取共性然后进行封装，留出特性接口方便我们使用。

3.2通过jQuery框架使用Ajax

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情

get函数应用,代码如下

//向服务端发送Ajax Get 请求 
function **doGet**(){ 
    //1.定义请求的url 
    var url="doAjaxGet"; 
    //2.定义请求的参数 
    var params="msg=hello jquery ajax get"; 
    //3.发送异步Get请求  
    $.get(url,params,function(result){ 
        //document.getElementById("result").innerHTML=result; 
        $("#result").html(result);
    },"text");//在这个函数中你看到ajax的代码了吗? 
}

post函数应用,代码如下

 //向服务端发送Ajax Post 请求 
 function doPost(){ 
     //1.定义请求的url 
     var url="doAjaxPost"; 
     //2.定义请求的参数 
     var params="msg=hello jquery ajax Post"; 
     //3.发送异步POST请求  //这里的$符号为jQuery中的一个对象  //post(url[,params][,callback][,dataType])为jquery中的一个ajax函数 
     $.post(url,params,function(result){
     //post请求一般用于向服务端提交数据 
         $("#result").html(result);
     });//在这个函数中你看到ajax的代码了吗? 
 }

ajax函数应用

 //向服务端发送Ajax Post 请求 
 function doAjax(){ 
     //1.定义请求的url 
     var url="doAjaxGet"; 
     //2.定义请求的参数 
     var params="msg=hello jquery ajax request"; 
     //3.发送异步Get请求 
     //这里的$符号为jQuery中的一个对象 
     $.ajax({
         type:"GET", //表示get请求(默认为get),省略不写为Get    
         url:url, //":"左边的内容为语法定义,我们不能修改.":"右边为我们自己定义 
         data:params, //请求参数 
         async:true, //true表示异步 
         success:function(result){ //回调函数 
             $("#result").html(result);
         }
     });//在这个函数中你看到ajax的代码了吗?
}

load函数应用

function doLoad(){ 
    //1.定义请求的url 
    var url="doAjaxGet"; 
    //2.定义请求的参数 
    var params="msg=hello jquery ajax request"; 
    //3.发送异步Get请求  
    //在指定位置异步加载url对象的资源,  
    //在当前应用中表示把url对象的资源呈现到#result位置.  //$("#result").load(url,params,function(){
    //回调函数,资源加载完成执行此函数  
    // console.log("load complete");  
    //}); 
    $("#result").load(url);
    //假如不向服务端传值,不需要处理load完以后的结果,还可以这样写 
}

4.AJax总结

$.get(url,params,function(result){}
$.post(url,params,function(result){}
$.ajax() //重点
$("#result").load(url,params,function(){}

我们关心的是客户端向服务端发送的url,
客户端向服务端发送的请求参数params,
服务器的响应数据resulst结果集。
一个原则，写的更少，干的更多。
框架封装了共性，我们写特性的部分。