Ajax是一种异步加载,部分更新的技术。
如:填写表单时,邮箱格式错误,用户名已存在等,会在你输入完成后就时事的提醒你,而不需要点击提交,刷新整个页面以后才告诉你。
这就是Ajax的牛逼之处:无刷新数据读取
网页的展示需要经过,浏览器(客户端)向服务端(服务器)发送请求,服务端返回响应。
请求:
- 方法
- get:查询,获取,一般不用于修改
- post:修改,删除,增加等
- url
- 请求头:客户端信息(与请求体之间有空行)
请求体 :客户端提交的字符串,表单
这里说一下请求会用到http协议,它是一种无状态协议。也就是说不会建立持久连接,干完事儿就断开了,无记忆。
响应:状态码:请求是否成功
- 响应头:服务器信息
- 响应体
这个过程要通过XMLHttpRequest对象来实现。但这个对象在ie6以下是不存在的,如果要兼容的话:
发送请求要用到XMLHttpRequest的一些属性和方法:
- open(method,url,async)
- saync:true/false 同步/异步
- send(string)
- get不用写,post写
获取响应:
- responseText:字符串
- responseXML:XML
- status和statusText:数字(状态码)和文本形式返回
而当我们发出请求后,可通过readystate属性来监视服务器响应的变化,在响应成功时得到通知。
readystate:
- 0:服务器还未初始化
- 1:链接已建立(open已调用)
- 2:请求已被接收(收到头)
- 3:请求处理中(收到主体)
- 4:请求已完成
总结:XMLHttpRequest建立异步请求4步
1. 创建XMLHttpRequest对象
2. open();
3. send();
4.监听 onreadystatechange
例:
jQuery中的Ajax
设定值:
- type 发送方式:post/get
- url
- data 对象,连同请求一起发送到服务器的数据(主要post使用)
- dataType 预期服务器返回的数据类型(一般为json)
- success 请求成功的回调函数
- error 请求失败的回调函数
$.ajax({
type:"GET",
url:" //此处省略 ",
dataType:"joson",
success:function(data){//data为已解析过的responseText
if(data.success){
//响应已经成功返回
//sucss为前端和后台约定好的json数据成员之一
}else{
//出现错误
}
},
error:function(jqXML){
alert("发生错误"+jqXML.status);
}
})
success是一个函数,这个函数传递过去不会立即执行,而是等着请求成功之后才能执行。对于这种传递过去不执行,等出来结果之后再执行的函数,叫做callback,即回调函数