zoukankan      html  css  js  c++  java
  • 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"));

  • 相关阅读:
    [转]centos sqlite3安装及简单命令
    [转] cmake源码编译安装jsoncpp
    [转]详解Linux(centos7)下安装OpenSSL安装图文方法
    [转]curl 命令模拟 HTTP GET/POST 请求
    [转]白话HTTP短连接中的Session和Token
    [转]浅谈HTTP中GET、POST用法以及它们的区别
    [转][linux][centos]嵌入式 Linux下编译并使用curl静态库
    [转]在CentOS安装CMake (CentOS7 64位适用)
    HTTP/2 资料汇总
    Http 1.x弊端与Http 2.0比较
  • 原文地址:https://www.cnblogs.com/ranzige/p/4274758.html
Copyright © 2011-2022 走看看