Ajax
Posted freefy
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax相关的知识,希望对你有一定的参考价值。
什么是Ajax
AJAX(Asynchronous javascript and xml)用JavaScript 以异步的形式操作 xml (现在操作的是json)
- Web的传统模型。客户端向服务器发送一个请求,服务器返回整个页面,如此反复
form表单传输数据的方式就属于传统的web模型,当我们提交数据后会刷新整个页面,在新的页面中返回内容。
form表单有三个很重要的属性,分别是
-
method:规定发送数据的http方式,一般是get或者post
-
action:要把数据传送到的地址
-
enctype:规定在发送表单数据之前如何对其进行编码
-
enctype的默认值是 “application/x-www-form-urlencoded”,即在发送前编码所有字符,这个属性值即使我们不写也是默认这个的。
multipart/form-data (<input type=‘file‘>) 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值
- AJAX模型中,数据在客户端与服务器之间独立传输,服务器不再返回整个页面。(异步局部地获取数据,大大改善了Form表单的缺点)
Ajax重要的两个对象
new XMLHttpRequest() 和new ActiveXObject(‘Microsoft.XMLHttp‘) 一般的主流浏览器支持第一个方法,IE6以下用第二个方法。
对象的方法
方法 | 描述 |
abort | 停止当前的请求 |
getAllResponseHeaders | 把http请求的所有响应首部最为键/值返回 |
getResponseHeaders(‘headerLabel’) | 返回指定首部的串值 |
open(‘method’, ‘url’, ‘true’) |
建立对服务器的调用,method参数可以是get、post或者put。 url参数可以是相对url或者绝对url, 第三个参数是选择异步还是同步,异步是true。 这个方法还包括三个可选参数。 |
send(string) | 向服务器发送请求 string:仅用于 POST 请求 |
setRequestHeader(‘header’, ‘value’) |
向请求添加 HTTP 头。之前必须调用open方法 header: 规定头的名称 value: 规定头的值 |
对象的属性
属性 | 描述 |
onreadystatechange | 状态改变触发器 |
readyState | 对象的状态,状态值
0代表未初始化,未调用send()方法 1代表读取中,已调用send(),正在发送请求 2代表已读取,send方法执行完成,接收到全部响应内容 3代表交互中,正在解析响应内容 4代表完成,响应内容解析完成 |
responseText |
获得字符串形式的响应数据 |
responseXML |
获得XML形式的响应数据 |
status |
服务器返回的状态码,如:404 = “文件未找到”、200 = “成功” 500 = “服务器内部错误” 304=“资源未被修改” |
statusText |
服务器返回的状态文本信息 |
AJAX创建流程
1.生成一个ajax对象
2.通过ajax对象 open(method,url,flag)方法初始化请求;
3.通过ajax对象 send发送数据
4.通过ajax对象的onreadystatechange来监听状态改变,当数据请求成功之后就可以操作数据了(readyState == 4&&status==200)
下面封装一个属于自己的ajax
1 function ajax(method, url, callback, data, flag) { 2 var xhr = null; 3 if(window.XMLHttpRequest) { 4 xhr = new XMLHttpRequest(); 5 }else { 6 xhr = new ActiveXObject(‘Microsoft.XMLHttp‘) 7 } 8 xhr.onreadystatechange = function() { 9 if(xhr.readyState == 4) { 10 if(xhr.status == 200) { 11 callback(xhr.responseText); 12 }else { 13 console.log(‘error‘); 14 } 15 } 16 } 17 method = method.toUpperCase(); 18 if(method == ‘GET‘) { 19 var date = new Date(), 20 timer = date.getTime(); 21 xhr.open(method, url + ‘?‘ + data + ‘&timer=‘ + timer, flag); 22 xhr.send(); 23 }else if(method == ‘POST‘) { 24 xhr.open(method, url, flag); 25 xhr.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘); 26 xhr.send(data); 27 } 28 }
以上是关于Ajax的主要内容,如果未能解决你的问题,请参考以下文章