JS——简单实现Ajax步骤

Ajax（Asynchronous JavaScript + XML）使得浏览器可以额外地向服务器请求数据而不用重新刷新页面，ajax从服务器或许到数据后，可用javascript操作DOM以改变页面。

定义XMLHttpRequest

实现ajax的核心是XMLHttpRequest对象，其使用主要是open()、send()等函数。

实现异步通信一班需要以下四步：
第一步：定义对象
第二步：调用，使用open函数打开
第三步：注册事件处理函数，准备接受响应并处理数据，并进行处理，然后调用对象，用send函数发送请求

var xhr = new XMLHttpRequest();

1.为了兼容性，事件回调需在open之前定义
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        if(xhr.status >= 200 && xhr.status < 300 | xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was failed.");
        }
    }
}
3.以get的方式请求example.txt，这里用相对路径，相对当前页面；最后一个参数代表是否异步。调用open之后，请求并没有发送，只是启动一个请求以备发送。
xhr.open("get", "example.txt", true);

4.请求主体无数据。调用send之后，请求就会被发送出去。
xhr.send(null);

定义XMLHttpRequest例子：

调用createXMLHTTPObject()方法返回XMLHttpRequest对象，代码如下：

<script>
    function createHTTPObject(){
        var XMLHttpFatories=[//兼容不同浏览器版本函数组
            function(){return new XMLHttpRequest()},
            function(){return new ActiveXObject('Msxm12.XMLHTTP')},
            function(){return new ActiveXObject('Msxm13.XMLHTTP')},
            function(){return new ActiveXObject('Microsoft.XMLHTTP')},
        ];
        var xmlhttp=false;
        for(var i=0;i<XMLHttpFatories.length;i++){
        //尝试用匿名 如果不成功，就继续下一个
            try{
                xmlhttp=XMLHttpFatories[i]();
            }catch(e){
                continue;
            }
            break;
        }
        return xmlhttp;
    }
</script>

建立XMLHttpRequest

定义创建对象后，可以使用XMLHttpRequest的open 函数建立，语法如下：

XMLHttpRequest.open（）；

该方法包含5个参数，其中前两个参数是必需的。 简单说明如下，

bstrMethd: HTTP 方法字符串，如POST. GET等，大小写不敏感。

bstrUrl: 请求的URL地址字符串，可以为绝对地址或相对地址。

VarAsyne: 布尔值，可选参数，指定请求是否为异步方式，默认为true.如果为真，当状态改变时会调用oedystatechange属性指定的回调函数。

bstUser: 可选参数，如果服务器需要验证， 该参数指定用户名，如果未指定，当服务器需要验证时会弹出验证窗口。

bstPassword: 可选参数，验证信息中的密码部分，如果用户名为空，则此值将被忽略.

例子：
使用XMLHttpRequest的send0方法发送请求到服务器端，并接收服务器的响应。send方法的用法如下所示。

XMLHttpRequest.send(varBody);

参数varBody表示将通过该请求发送的数据)如果不传递信息，可以设置参数为mull。

使用XMLHttpRequest对象的responseBody、responseStream、 response Text或responseXML属性，可以接收响应数据。

例子：
下面示例简单演示了如何实现异步通信方法，

<script>
    function createHTTPObject(){
        var XMLHttpFatories=[
            function(){return new XMLHttpRequest()},
            function(){return new ActiveXObject('Msxm12.XMLHTTP')},
            function(){return new ActiveXObject('Msxm13.XMLHTTP')},
            function(){return new ActiveXObject('Microsoft.XMLHTTP')},
        ];
        var xmlhttp=false;
        for(var i=0;i<XMLHttpFatories.length;i++){
            try{
                xmlhttp=XMLHttpFatories[i]();
            }catch(e){
                continue;
            }
            break;
        }
        return xmlhttp;
    };
    xmlHttp.open("GET","hello world", false);
    xmlHttp.send(null);
    alert(xmHtp.responseText);
</script>

在服务器端文件(server.asp) 中输入下面的字符串。

Hello World

在浏览器中预览客户端交h页面就会弹出-个提示对话框，显示“Hello World"的提示信息。

发送GET请求

发送GET请求时，只将包含查询字符串的URL传入open（）方法。
使用GET请求较简单，比较方便，他适合传递简单的信息，不易传输大容量或者加密数据。

例子：
在页面(main.html)中定义一个请求连接，代码如下：

<script>

        function request(url){
        xmlHttp.open("GET","url", false);
        xmlHttp.send(null);
        alert(xmHtp.responseText);
        }
        window.onload=function(){
            var b=document.getElementsByTagName('input')[0];
            b.onclick=function(){
                var url='server.asp?callback=functionName'
                request(url);
            }
        }

</script>
<h1>异步传输数据</h1>
<input name="submit" type="button" id="submit" value="向服务器发送请求"/>

在服务器端文件server.asp中输入下面的代码，获取查询字符串callbank的参数值，应该把值相应给客户端

在浏览器中预览页面，当单击提交按钮时会弹出一个提 示对话框，显示传递的参数值，代码如下：

<%@LANGUAGE='VBSCRIPT' CODEPAGE='65001'%>
<%
callback=Request.QueryString('callback')
Response.Write(callback)
%>

提示: 查询字符串通过问号(?)前缀附加在URL的末尾，发送数据是以连字符(&)连接的
个或多个名/值对。每个名称和值都必须在编码后才能用在URL中，用户使用JavaScrip的cnoodeURIComponent()函数对其进行编码，服务器端在接收这些数据时也必须使用decodeURIComponent0函数进行解码。URL最大长度为2048字符(2KB).

发送POST请求

OST请求支持发送任意格式、任意长度的数据，般多用于表单提交。 与GET发送的数据格式相似，FOST发送的数据也必须进行编码，并用连字符(&)进行分隔，语法如下:

send('name1=value&name2=value2...');

例子：
使用post方法向服务器传输数据，代码如下：

<script>
var oStr = '';
var postData = {};
var oAjax = null;

//post提交的数据
postData = {"name1":"value1","name2":"value2"};

//这里需要将json数据转成post能够进行提交的字符串  name1=value1&name2=value2格式
postData = (function(value){
　　for(var key in value){
　　　　oStr += key+"="+value[key]+"&";
　　};
　　return oStr;
}(postData));

//这里进行HTTP请求
try{
　　oAjax = new XMLHttpRequest();
}catch(e){
　　oAjax = new ActiveXObject("Microsoft.XMLHTTP");
};

//post方式打开文件
oAjax.open('post','1.php?='+Math.random(),true);

//post相比get方式提交多了个这个
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//post发送数据
oAjax.send(postData);
oAjax.onreadystatechange = function(){

　　//当状态为4的时候，执行以下操作
　　if(oAjax.readyState == 4){
　　　　try{
　　　　　　alert(oAjax.responseText);
　　　　}catch(e){
　　　　　　alert('你访问的页面出错了');
　　　　};
　　};
};
</script>