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 xmlHttpRequest的status的值的含义
  • AJAX中同时发送多个请求XMLHttpRequest对象处理方法
  • 解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题
  • 如何用ajax来创建一个XMLHttpRequest对象
  • Ajax通讯原理XMLHttpRequest
  • ajax 入门基础之 XMLHttpRequest对象总结
  • AJAX入门之XMLHttpRequest慨述
  • AJAX(XMLHttpRequest.status)状态码
  • XMLHttpRequest对象_Ajax异步请求重点(推荐)
  • AJAX XMLHttpRequest对象详解
  • 不使用XMLHttpRequest对象实现Ajax效果的方法小结
张贴在3