Ajax核心XMLHttpRequest总结

 更新时间:2015年02月26日 14:53:44   转载 投稿:hebedich  
本文主要是给大家总结了一下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,IE8,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.5,IE5");
    var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
    for (var n=0;n

扩展问题

    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 GET 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"));

以上就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • Ajax 汇总以及初步评价

    Ajax 汇总以及初步评价

    Ajax 汇总以及初步评价...
    2006-08-08
  • 浅析Ajax后台success传来json数据的问题

    浅析Ajax后台success传来json数据的问题

    最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据。下面小编给大家介绍下在$.ajax方法中应该是如何来处理的
    2016-10-10
  • ajax给全局变量赋值问题解决示例

    ajax给全局变量赋值问题解决示例

    ajax默认是异步请求,如果要在$.ajax({里面给全局变量赋值,需要改为同步操作,即加上async : false,就可以了
    2014-01-01
  • ajax三级联动实现代码

    ajax三级联动实现代码

    这篇文章主要为大家详细介绍了ajax三级联动的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • ajax数据传输方式实例详解

    ajax数据传输方式实例详解

    这篇文章主要介绍了ajax数据传输方式,结合实例形式较为详细的分析总结了ajax数据传输的原理与传输文本、xml及json格式数据的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • 解决浏览器记住ajax请求并能前进和后退问题

    解决浏览器记住ajax请求并能前进和后退问题

    在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这篇文章主要介绍了让浏览器记住ajax请求并能前进和后退方法(一),需要的朋友可以参考下
    2017-06-06
  • Ajax+PHP简单数据交互

    Ajax+PHP简单数据交互

    这篇文章主要为大家详细介绍了Ajax+PHP简单数据交互,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • AJAX请求队列实现

    AJAX请求队列实现

    这篇文章主要为大家详细介绍了AJAX请求队列的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • ajax同步验证单号是否存在的方法

    ajax同步验证单号是否存在的方法

    这篇文章主要介绍了ajax同步验证单号是否存在的方法,涉及基于ajax的数据交互相关操作技巧,需要的朋友可以参考下
    2016-08-08
  • AJAX跨域请求之JSONP获取JSON数据

    AJAX跨域请求之JSONP获取JSON数据

    JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
    2015-09-09

最新评论