Ajax核心技术之XMLHttpRequest

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了Ajax核心技术之XMLHttpRequest，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。


Ajax：即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换；JavaScript操作DOM实现动态效果；运用XHTML+CSS表达信息；XML和XSLT操作数据。此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换。

使用方法

XMLHttpRequest五步使用法：

1.创建对象；

2.注册回调函数；

3.使用open方法设置和服务器交互的基本信息；

4.设置发送的数据，开始和服务器端交互；

5.实现回调函数.

由于每次应用XMLHttpRequest对象时，都要进行五步操作，因此，可将该对象的使用封装为js文件中，传递部分参数使用其方法就可以完成相应功能，实现如下：

//使用封装方法人员只提供http的请求，URL地址，数据，成功和失败的回调的方法

//1.定义XMLHttpRequest对象的构造方法
var MyXMLHttpRequest =function(){
    var xmlhttprequest;
    if(window.XMLHttpRequest){
        //IE7,IE8,FireFox，Mozillar，Safari，Opera
        //alert("IE7,FireFox，Mozillar，Safari，Opera");
        xmlhttprequest = new XMLHttpRequest();
        //解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题
        if(xmlhttprequest.overrideMimeType){
            xmlhttprequest.overrideMimeType("text/xml");
        }
    }else if(window.ActiveXObject){
        //IE6,IE5.5,IE5
        alert("IE6,IE5");
        var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var n=0;n<activexName.length;n++){
            try{
                xmlhttprequest = new ActiveXObject(activexName[i]);
                break;
            }catch(e){
                
            }
        }
    }
    if(xmlhttprequest === null){
        alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
    } else {
        this.xmlhttp=xmlhttprequest;
    }
};
//用户发送请求的方法
MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback){
    if (this.xmlhttp !== undefined && this.xmlhttp !== null){
        method = method.toUpperCase();
        if(method !== "POST" && method !== "GET") {
            alert("HTTP的请求方式必须是GET或POST");
            return;
        } 
        if(url === null || url === undefined) {
            alert("HTTP的请求地址必须设置");
            return;
        }
        var tmpxmlhttp = this.xmlhttp;
        //2.注册回调函数
        this.xmlhttp.onreadystatechange = function(){
            //5.判断和服务器的交互是否完成，还要判断服务器端是否正确返回了数据
            if (tmpxmlhttp.readyState == 4) {
                //表示和服务器的交互已经完成
                if(tmpxmlhttp.status == 200){
                    //表示服务器的相应代码是200，正确的返回了数据
                    //纯文本数据的接收方法
                    var responseText = tmpxmlhttp.responseText;
                    var responseXML = tmpxmlhttp.responseXML;
                    if(callback === undefined || callback === null) {
                        alert("没有设置处理数据正确返回的方法");
                        alert("返回的数据：" + responseText);
                    } else {
                        callback(responseText,responseXML);
                    }
                }else {
                    if(failback === undefined || failback === null){
                        alert("没有设置处理数据返回的处理方法");
                        alert("Http的相应码：" + tmpxmlhttp.status + "相应码的文本信息：" + xml.statusText);
                    } else {
                        failback(tempxmlhttp.status,tempxmlhttp.statusText);
                    }
                }
            }
        }
        //3.使用open方法设置和服务器端交互的基本信息
        this.xmlhttp.open(method,true);
        //如果是POST方式，需要设置请求头
        if(method === "POST") {
            this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencode");
        }
        //4.设置发送的数据，开始和服务器端交互。
        this.xmlhttp.send(data);
    } else{
        alert("XMLHttpRequest对象创建失败，无法数据");
    }
}
//取消当前响应，关闭连接并且结束任何未决的网络活动
MyXMLHttpRequest.prototype.abort = function(){
    this.xmlhttp.abort();
}


扩展问题

1.浏览器缓存

2.中文乱码

3.跨域访问

对于问题1、问题3都可以通过更改url地址的方法得以解决。问题1可在url地址尾添加时间戳，问题3通过代理方式进行解决。只需在send()中的第三步执行前添加相应判断即可：

        //解决缓存的转换：增加时间戳
        if(url.indexOf("?") >= 0 ){
            url = url + "&t=" + (new Date()).valueOf();
        } else {
            url = url + "?t=" + (new Date()).valueOf();
        }
        
        //解决跨域的问题
        if(url.indexOf("http://") >= 0) {
            url.replace("?","&");
            url = "Proxy?url=" + url;
        }

问题3对应代理服务端实现：


    /**
     * Handles the HTTP <code>GET</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request,HttpServletResponse response)
            throws ServletException,IOException {
        //获取参数，最后得到请求URL地址类似于：url = http://192.168.../AJAX/AJAXServer?aa=11&bb=22&cc=33
        StringBuilder url = new StringBuilder();
        url.append(request.getParameter("url"));
        //获取访问的跨域地址url = http://192.168.../AJAX/AJAXServer
        Enumeration enu = request.getParameterNames();
        boolean flag = false;       //定义标志变量，表示是否为拼接的第一个参数
        while(enu.hasMoreElements()){
                String paramName = (String) enu.nextElement();
                if(!paramName.equals("url")){
                        String paramValue = request.getParameter(paramName);
                        paramValue = URLEncoder.encode(paramValue,"utf-8");
                        if(!flag){
                                url.append("?").append(paramName).append("=").append(paramValue);
                                flag = true;
                        } else {
                                url.append("&").append(paramName).append("=").append(paramValue);
                        }
                }
        }
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        if(url != null && url.length() > 0){
                URL connectionUrl = new URL(url.toString());
                BufferedReader reader = new BufferedReader(new InputStreamReader(connectionUrl.openStream(),"utf-8"));
                String line;
                while((line = reader.readLine()) != null){
                        out.println(line);
                }
                reader.close();
        }
    }

    /**
     * Handles the HTTP <code>POST</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request,IOException {
        //获取参数，最后得到请求URL地址类似于：url = http://192.168.../AJAX/AJAXServer?aa=11&bb=22&cc=33
        String url = request.getParameter("url");
        //获取访问的跨域地址url = http://192.168.../AJAX/AJAXServer
        StringBuffer paramBuffer = new StringBuffer();
        Enumeration enu = request.getParameterNames();
        boolean flag = false;       //定义标志变量，表示是否为拼接的第一个参数
        while(enu.hasMoreElements()){
                String paramName = (String) enu.nextElement();
                if(!paramName.equals("url")){
                        String paramValue = request.getParameter(paramName);
                        paramValue = URLEncoder.encode(paramValue,"utf-8");
                        if(!flag){
                                paramBuffer.append(paramName).append("=").append(paramValue);
                                flag = true;
                        } else {
                                paramBuffer.append("&").append(paramName).append("=").append(paramValue);
                        }
                }
        }

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        if(url != null && url.trim().length() > 0){
                URL connectUrl = new URL(url);
                URLConnection connection =connectUrl.openConnection();
                connection.setDoOutput(true);
                OutputStreamWriter writer = new OutputStreamWriter(connection.getOutputStream());
                writer.write(paramBuffer.toString());
                writer.flush();
                BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream(),"utf-8"));
                String line;
                while((line = reader.readLine()) != null){
                        out.println(line);
                }
                writer.close();
                reader.close();
        }
    }


对于问题2


(1)响应数据解决中文乱码的方法：保证页面端定义的charset和http响应头的Content-Type中定义的charset一致。


①http响应头的Content-Type中charset设置为utf-8


②仅仅使用"MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"这两个中的一个来创建XMLHttpRequest对象。


(2)请求数据中文乱码解决方法：由于服务器端getParameter()方法会自动进行一次ISO8859规则解码，因此页面端应使用javascript中的encodeURI()方法对请求数据进行两次编码，服务器端使用URLDecode(utf-8)进行一次解码。


总结

XMLHttp详细属性、方法介绍：http://www.w3school.com.cn/xmldom/dom_http.asp

Ajax异步交互主要通过XMLHttpRequest对象实现，搜索Suggest、GoogleMap等应用的友好体验使得此对象的使用愈显重要，希望本文对读者更好的使用XMLHttpRequest提供了一定帮助。

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作