zoukankan      html  css  js  c++  java
  • 原生Ajax使用教程

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6682564.html 

        浏览器端

        一:创建XMLHttpRequest对象  

        所有现代浏览器均支持 XMLHttpRequest 对象(旧版IE除外,IE5和IE6使用 ActiveXObject)

        由于不同浏览器的控件不同,所以为了兼容性,需要根据当前页面所在浏览器以不同方式获取到XMLHttpRequest对象:先检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject。

    var xmlhttp; 
    if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性,如果为真则支持XMLHttpRequest
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器支持XMLHttpRequest 
    xmlhttp=new XMLHttpRequest(); 
    } else { 
    // IE6, IE5 浏览器使用ActiveXObject
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    }

        

        二:向服务器URL发出请求,传递参数   

        我们使用 XMLHttpRequest对象的open() 方法连接到服务器某url,设置回调函数监听返回结果、最后send() 并发出请求、传参。
    方法 描述
    open(method,url,async) 请求类型、URL 以及是否异步处理请求。
    method:请求的类型;GET 或 POST
    url:处理请求的文件在服务器上的位置
    async:true(异步)或 false(同步)
    send(string)

    将请求发送到服务器。
    string:仅用于 POST 请求。如果上面open中设置请求方法为GET,则此处send(null),若上面

    为Post,则send("para1=val1 & para2=val2...")传递参数

         GET方式:在open()方法的url参数后面拼接参数,然后send()发送一个请求过去即可。

         POST方式:open()方法URL不携带参数,在send()中传递参数列表发送请求,并且在发送请求前需要设置请求头的Content-Type属性。

         而设置回调函数是通过

    xmlHttp.onreadystatechange = 回调函数;

        实现的,这里注意:回调函数赋值给xmlHttp.onreadystatechange时不能带(),只是把函数名赋值。

        

        所以Ajax向服务器发出请求的操作步骤为:

        1:通过xmlHttp.open()设置发送请求的目标url,并指明发送方式、是否异步处理请求(一般选true);

        2:为xmlHttp.onreadystatechange设置回调函数处理返回结果

        3:通过xmlHttp.send()发出请求

    GET方式:
    xmlHttp.open("GET", "url?参数=val & ...", true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null);
    POST方式:
    xmlHttp.open("POST", url, true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//用post方法的话,一定要加这句设置请求头的contentType属性 xmlHttp.onreadystatechange = callback; xmlHttp.send("参数=val &..."); //在send方法中传递参数。

         三:定义回调函数callback,监听onreadystatechange事件,处理返回结果

        XMLHttpRequest 对象有三个重要的属性:
    属性 描述
    onreadystatechange 值是一个函数,每当 readyState 属性改变时,就会调用该函数。
    readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
    status 200: 请求处理成功
    404: 未找到页面

         onreadystatechange 事件   

         当请求被发送到服务器时,服务器对请求进行处理并作出响应,而对请求的处理的不同阶段对应不同的readyState,readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState改变时,就会触发onreadystatechange 事件。
         我们使用一个回调函数处理onreadystatechange 事件,函数一般格式为:
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    处理结果;
    }else{
    错误提示;

         

        处理结果

        服务器与浏览器的信息传递归根到底是IO流的传输,而IO流传输的是字节流、字符流。但是,我们知道简单的字符串有时候不能很好地表达我们的结果,比如:返回结果是一组对象。这时候我们就可以用某种易于携带数据、易解析的字符串来传递结果了。在Ajax中,返回的结果类型可以有多种,普通文本、XML、JSON、Html等都可以,而这多种结果类型最终只用xmlhttprequest的两个属性获取:

    属性 描述
    responseText 获得字符串形式的响应数据。包括普通文本、json字符串、html字符串
    responseXML 获得 XML 形式的响应数据并解析成xml的document对象。

        XML格式的结果字符串可以用responseXML获取并解析成xml的document对象进行结点访问与内容提取;普通文本、json字符串、html字符串(少用)则通过responseText获取,普通文本结果直接使用,json字符串通过eval(jsonstring)解析成json对象来使用,html字符串则用来改变html页面的某处代码。

    if(ID=="getTXT"){    
                //以普通文本返回:
                var str = xmlHttp.responseText;  
                }
                        
    if(ID=="getXML"){
                //以xml文档返回:
                    var xmldoc = xmlHttp.responseXML;
                            var nodes=xmldoc.getElementsByTagName("标签名");   //按标签解析为数组
                            for(var i=0;i<nodes.length;i++)  
                            {  
                                提取结点值并使用; 
                            }
                        }
                        
    if(ID=="getJSON"){
                //以json文档返回:json数据的处理统一先用responseText作为一个字符串接收后再转为json对象进行处理
                   var str = xmlHttp.responseText; 
                   var json = eval('(' + str + ')');
                   通过json.XX提取内容  
                     }
                       

        服务器端

        服务器端定义一个servlet进行请求处理,然后返回结果。

        返回结果的步骤:

        1:设置响应编码格式;

        2:设置响应的Content-Type;

        3:拼接结果字符串:XML格式的结果需要用StringBuffer或StringBuilder来拼接。一定要先加XML标准定义:<?xml version="1.0" encoding="utf-8"?>   

        4:获取响应输出流;

        5:通过输出流向浏览器传输结果字符串;

    public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
                
            request.setCharacterEncoding("UTF-8"); 
            String ID = request.getParameter("ID");        
                if("getTXT".equals(ID)){
                getTXT(request, response);
            }else if("getXML".equals(ID)){
                getXML(request, response);
            }else if("getJSON".equals(ID)){
                getJSON(request, response);
            }    
        }
            
        public void getTXT(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            response.setCharacterEncoding("UTF-8");     
            response.setContentType("text/plain; charset=UTF-8");
            PrintWriter out = response.getWriter();
            out.write("普通文本值");     
            out.close();
        }
        
        public void getXML(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            response.setCharacterEncoding("UTF-8");     
            response.setContentType("text/xml; charset=UTF-8");
            PrintWriter out = response.getWriter();
            //XML格式的结果需要用StringBuffer或StringBuilder来拼接。切记:一定要先加XML标准定义<?xml version="1.0" encoding="utf-8"?>    
            StringBuffer sb = new StringBuffer("<?xml version="1.0" encoding="utf-8"?>");
            sb.append("<root><node>结点值</node></root>");        
            out.write(sb.toString());  
            out.close();
        }
        
        public void getJSON(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    
            response.setCharacterEncoding("UTF-8");     
            response.setContentType("application/json; charset=UTF-8");
            PrintWriter out = response.getWriter();
            out.write("{JSON字符串}");
            out.close();
        }
  • 相关阅读:
    mysql 函数 存储过程 事件(event) job 模板
    protobuf 无proto 解码 decode 语言 java python
    mitmproxy fiddler 抓包 填坑
    android adb 常用命令
    android机器人 模拟 踩坑过程
    RabbitMQ添加新用户并支持远程访问
    Windows下RabbitMQ安装及配置
    Java mybatis mysql 常用数据类型对应关系
    easyExcel 踩坑
    linux防火墙查看状态firewall、iptable
  • 原文地址:https://www.cnblogs.com/ygj0930/p/6682564.html
Copyright © 2011-2022 走看看