乐趣区

关于ajax:Ajax在实战中的应用

jiezi

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 后果集。
一个准则，写的更少，干的更多。
框架封装了共性，咱们写个性的局部。

退出移动版