Ajax
Ajax:Asynchronous JavaScript and XML 异步的javascript和xml
ajax不是新的编程语言,而是一种使用现有标准的新方法。
ajax在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。
首先简单了解记录下
1、客户端和服务端同步和异步交互
同步交互处理的情况是:
客户端发送请求给服务端,然后客户端处于等待状态,服务端处理请求并响应,返回给客户端,页面重新载入。如果有新的请求重复该步骤,页面信息请求信息过多每次重新载入会让人抓狂滴。
异步交互处理的情况是:
客户端发送请求给服务端,服务端处理请求,但是客户端同时能进行其他操作,服务端处理返回给客户端,页面载入。
2、http请求
get:一般用于信息获取
使用URL传递参数
对发送的信息数量有限制,一般在2000个字符
post:一般用于修改服务器上的资源
对发送的信息数量没有限制
HTTP状态码由3位数字构成,其中首位数字定义了状态码的类型:
1**:信息类,表示收到web浏览器请求,正在进一步处理中。
2**:成功,表示用户请求被正确接收。
3**:重定向,表示请求没有成功。
4**:客户端错误,表示客户端提交的请求有错误。
5**:服务器错误,表示服务器不能完成对请求的处理。
那么怎样开始ajax异步交互呢?
XMLHttpRequest对象是ajax的基础,用于和服务器交换数据。(所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象,所以不考虑ie6的时代可以放心的使用该对象了。
var request = new XMLHttpRequest();
1、向服务器发送请求,XMLHttpRequest()对象提供了2个方法open()和send()
request.open(method, url, async);
method:请求类型GET或POST
url:文件在服务器上的地址
async:true(异步)或false(同步)
request.send(string);
举个例子
GET请求
request.open("GET", "test.php", true);
request.send();
简单的post请求
request.open("POST", "test.php", true);
request.send();
/*------*/
如果需要像html表单那样post数据,需要使用setRequestHeader(header, value)来添加http头部,然后在send()中规定发送的数据
request.open("POST", "test.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("name=a&age=b");
2、服务器响应
XMLHttpRequest()方法提供了responseText或responseXML属性
responseText获得字符串形式的响应数据
responseXML获得XML形式的响应数据
status和statusText获得数字和文本形式返回的HTPP状态码
status: 200 ok
404 未找到页面
getAllResponseHeader()获得所有的响应报头
getResponseHeader()查询响应中的某个字段的值
readyState属性存有XMLHttpRequest的状态信息
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
每当readyState改变时,会触发onreadystatechange事件
request.onreadystatechange = function() {
if(request.readyState === 4 && request.status === 200) {
//
}else {
//
}
}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。