Ajax：即“Asynchronous java script and XML”（异步java script和XML)，一门综合性的技术:运用java script对象XMLHttpRequest进行异步数据交换；java script操作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"));
                String line;
                while((line = reader.readLine()) != null){
                        out.println(line);
                }
                reader.close();
        }
    }

    /**
     * Handles the HTTP POST 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, HttpServletResponse response)
            throws ServletException, IOException {
        //获取参数，最后得到请求url地址类似于：url = http://192.168.../AJAX/AJAXServer aa=11&bb=22&cc=33
        String url = request

Ajax核心技术之XMLHttpRequest(一)

使用方法

扩展问题