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

50次阅读

共计 2586 个字符,预计需要花费 7 分钟才能阅读完成。

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

正文完
 0