javaScript学习之ajax

一.xmlHttpRequest对象的创建

ajax的核心的XMLHttpRequest对象，下面的代码给出了兼容各个浏览器的方法实现

function createXHR(){
    if(typeof XMLHttpRequest !="undefined"){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != 'undefined'){
        if(typeof arguments.callee.activeXString !="string"){
            var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
            var i,len;
            ;len=versions.length;i++){
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString=versions[i];
                    break;
                }catch(ex){

                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("no XHR object available...");
    }
}

事实上，如果不理会IE7之前的版本，使用原生的CHR就能够实现。

二，XHR常用方法

1）xhr.open():接受三个参数，请求类型（get，post），请求的url，是否是异步请求（是为true，否为false）

对于xhr来说，传入open()方法的url末尾的查询字符串必须使用encodeURIComponent()经过正确的编码,下面给出了向现有url添加查询字符串的方法

function addUrlParam(url,name,value){
    url+=(url.indexOf(?"?":"&");
    url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
    return url;
}

2）xhr.send():get为null，post为要发送的数据。

3）xhr.setRequestHeader(),设置请求头

4）xhr.onreadystatechage 设置异步请求的回调函数，为了保证浏览器的兼容性，需要在open（）之前指定该回调

5）xhr.timeout 设置请求的超时时间

6) xhr.ontimeout 超时回调函数

在请求过程中，xhr对象的readystate属性会发生变化

1）0:尚未初始化，尚未成功调用open()方法

2）1：启动，已经调用open(),尚未调用send()

3) 2: 发送，已经调用send()

4) 3: 接收，已经接收到部分响应

5）4：完成，已经接收到全部响应数据，客户端可以使用

在收到响应后，响应数据会自动填充xhr对象的下列属性：

1）responseText:响应文本

2) responseXML 如果响应类型是"text/xml"或者"application/xml",该属性有值，否则为空

3）status 响应状态码，一般200是成功的标志，304代表从缓存中取得数据

4）statusText 响应状态说明，最好不要使用，在跨浏览器中不太可靠

三、xhr用法示例

function sendGet(url){
    var xhr=createXHR();
    xhr.onreadystatechange=function(){
        ){
            &&xhr.status<||xhr.status==){
                alert(xhr.responseText);
            }else{
                alert("request was fail");
            }
        }
    }
    xhr.open("get",url,true);
    xhr.send(null);
}

post请求与之类似

四、备注

1）以上方法只是XMLHttpRequest1级的相关方法，XMLHttpRequest1又在此基础上拓展了相关API，这里不再赘述

五、跨域问题解决

1.CORS（跨域资源共享），是W3C的一个工作草案，其背后思想是，使用自定义的http头部，让浏览器与服务器进行沟通，从而决定请求或相应应该成功还是失败。这是自己之前在chrom下跨域请求发现Options方法，以及status为0的原因，具体细节不再展开。这种方法需要修改服务器端代码。

2.图像ping，图像的src属性不存在跨域问题，可以使用图像的onload和onerror事件处理程序来确定是否接受到了响应，不过这种方法具有两个缺点：1）只能发送get请求，2）无法访问服务器的响应文本，只是一种单向的通信

3.jsonp：利用原生的javascript的时候，通过动态script元素，将其src属性指定为一个跨域的url。当然也可以通过jquery的ajax实现。此时服务器端需要修改，将返回的json字符串包围在回调函数中，而回调函数的名称在请求中由queryString指定。

1）利用原生javascript实现jsonp跨域请求

function handleResponse(response){
    console.log("response:"+response);
    alert(response.name);
}
EventUtil.addHandler(document,"DOMContentLoaded",function(){
    var url="http://127.0.0.1:8888/Bobo1/servlet/TestServlet";
    url=addUrlParam(url,"callback","handleResponse");
    console.log("url:"+url);
    var scriptElem=document.createElement("script");
    scriptElem.setAttribute("src",url);
    document.body.appendChild(scriptElem);
});

与之对象的服务器端代码

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String callback=request.getParameter("callback");
        String result=callback+"({\"name\":\"bobo\"})";
        out.println(result);
    }

2）利用jquery实现jsonP

$(function(){
    $.ajax({
        url:"http://127.0.0.1:8888/Bobo1/servlet/TestServlet?callback=handleResponse",
        type:"get",
        dataType:"jsonp",
        success:function(){
            handleResponse();
        }
    });

});

服务器端同上

4，推送（comet）：具体细节可以参照教材，这里不再详细叙述。

巴特西

javaScript学习之ajax

最新文章

热门文章