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