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