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 {
            //
        }
    }

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。