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();
        }
  • 相关阅读:
    .net core使用EasyNetQ做EventBus
    .NET Core DI 手动获取注入对象
    设置Jexus开机启动
    centos7开放关闭防火墙端口
    linux防火墙开放端口
    转 Jexus-5.6.3使用详解
    Mysql存储过程
    Reids笔记
    Lucene笔记
    Spring Junit 测试用例
  • 原文地址:https://www.cnblogs.com/ygj0930/p/6682564.html
Copyright © 2011-2022 走看看