AJAX入门

来源：互联网发布：微软人工智能框架编辑：程序博客网时间：2024/06/07 02:09

AJAX介绍

【1】AJAX简介

全称：Asynchronous IavaScript And XML(异步的JavaScript和XML)

AJAX就是通过JavaScript向服务器发送请求，并接收响应，然后我们在通过DOM修改页面。

XML指的是服务器响应的数据的格式。

目前AJAX 已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。AJAX可以响应txt、xml、json格式的数据。

【2】同步和异步

同步：当我们通过浏览器向服务器发送一个请求时，浏览器会刷新整个页面。

异步：当我们向服务器发送请求时，不是刷新整个页面，而是只刷新网页的一部分。

【3】XMLHttpRequest对象

我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
在XMLHttpRequest对象中封装发送给服务器请求报文，同时在服务器发回响应时，响应信息也会在对象中封装。
如何获取XMLHttpRequest对象var xhr = new XMLHttpRequest();

【4】使用步骤

第一步：创建XMLHttpRequest对象；

大部分比较新的浏览器都支持的方式（IE7以上）
var xhr = new XMLHttpRequest();
IE6以下的浏览器
var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.5以下的浏览器
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

通用的获取XMLHttpRequest对象的方法：

//写一个获取XHR的方法            function getXMLHttpRequest(){                try{                    //大部分浏览器都支持的方式                    return new XMLHttpRequest();                }catch(e){                    try{                        //IE6以下浏览器支持的方式                        return new ActiveXObject("Msxml2.XMLHTTP");                    }catch(e){                        try{                            //IE5以下的浏览器                            return new ActiveXObject("Microsoft.XMLHTTP");                        }catch(e){                            alert("你是火星来的吧！你的浏览器不支持AJAX！");                        }                    }                }            }

第二步：设置请求信息（请求地址，请求方式，请求参数）

xhr.open(请求方式,请求地址);
在发送post请求时，还需要设置一个请求头，如下：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

第三步：发送请求

xhr.send(请求体);
get请求没有请求体，所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数。

第四步：接收响应信息

//xhr绑定一个onreadystatechange响应函数，这个函数会在readyState属性发生改变时调用            xhr.onreadystatechange = function(){                //判断当前readyState是否为4 ， 且响应状态码为200                if(xhr.readyState==4 && xhr.status==200){                    //读取响应信息，做相关操作。                    //如果信息为纯文本                    var text=xhr.responseText;                          //如果信息为XML                    var xml=xhr.responseXML;                }            };

第五步：响应数据的格式
响应的格式有三种：txt、xml、json.

前端请求处理与后端请求处理

前端请求处理：就是在第二步设置请求信息时，请求地址为一个xml格式的文件或json格式的文件地址。
后端请求处理：设置请求信息时，请求地址为一个servlet的地址，在后台处理数据。

前端请求示例：
这里写图片描述
后端请求示例：

<title>省市联动效果</title><script type="text/javascript">/** * 1.在文档加载完毕时发送请求，得到所有省份名称显示在province中 2.在选择了新的省份时，发送请求，得到XML文档 3.解析xml文档，得到其中所有的<city>，在得到每个<city>元素的内容，即市名，使用市名生成<option>，插入到<select>中 */ function createXmlHttpRequest(){        try{            return new XMLHttpRequest();//大多数浏览器        }catch(e){             try{                return ActvieXObject("Msxml2.XmlHTTP");//IE6.0                  }catch(e){                return ActvieXObject("Microsoft.XMLHTTP");//IE5.0            }         }    } window.onload=function(){     /**     ajax四步，请求ProvinceServlet，得到所有省份名称     使用每个省份名称创建一个<option>元素，添加到<select name=province>中     */     var xmlHttp=createXmlHttpRequest();     xmlHttp.open("GET","/shengshiliandong/ProvinceServlet",true);    //3.发送请求        xmlHttp.send(null);//get没有请求体，但也要给出null，不然Firefox可能会不能发送        //4.给异步对象的onreadystatechange事件注册监听器        xmlHttp.onreadystatechange=function(){            //双重判断：服务器响应结束和响应成功            if(xmlHttp.readyState==4 && xmlHttp.status==200){                //获取服务器的响应结束                var text=xmlHttp.responseText;                //使用，分割他，得到数组                var arr=text.split(",");                //循环遍历每个省份名称，                for( var i=0;i<arr.length;i++){                    var op=document.createElement("option");//创建一个指定名称元素                    op.value=arr[i];                    var textNode=document.createTextNode(arr[i]);//创建文本节点                    op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值                    document.getElementById("p").appendChild(op);                }            }        } }</script></head><body><h2 align="center">演示省市联动</h2><select name="province" id="p">    <option>===请选择省===</option></select><select name="city">    <option>===请选择市===</option></select></body>

后端处理代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        /**         * 响应所有省的名称         */        //1.Document对象        //创建解析器对象        //调用解析器的读方法，传递一个流对象，得到Document        try {            SAXReader reader=new SAXReader();            InputStream input=this.getClass().getResourceAsStream("/china.xml");                        Document doc=reader.read(input);            /**             * 查询所有province的name属性，得到一堆的属性对象             * 循环遍历，把所有的属性连接成一个字符串，发送给客户端             */            List<Attribute> arrList = doc.selectNodes("//province/@name");            StringBuilder sb=new StringBuilder();            for(int i=0;i<arrList.size();i++){                sb.append(arrList.get(i).getValue());//把每个属性的值存放到sb中                if(i<arrList.size()-1){                    sb.append(",");                }            }            response.getWriter().print(sb);        } catch (DocumentException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }    }

通过jQuery实现AJAX

[1] post()方法
$.post(url, [data], [callback], [type])

参数：
url：发送AJAX的请求地址，字符串。
data：发送给服务器的请求参数，JSON格式。
callback：当前需要获取服务器发送的响应时，我们可以通过该回调函数。
jQuery会将响应信息以回调函数的参数的形式返回
type：响应信息的类型，字符串。一般两个常用值text、json

[2] get()方法
- get方法和post方法使用方式基本一致。

[3] getJSON()方法
getJSON(url, [data], [callback])
getJSON方法和get方法类似，只不过该方法默认的响应类型为JSON，不需要再手动指定。
注意：

使用get和getJSON都会有缓存问题，并且使用get方法不能传送较多的数据。
post方法不会有缓存的问题，所以我们开发时使用post方法较多。
不要忘记导jquery文件。

示例代码:

<script src="/AJAXTest/js/jquery.min.js"></script><script>    $(function(){        $("#btn1").click(function(){            var url="${pageContext.request.contextPath}/AServlet";            var json={"username":"zhangsan","age":20};            function callback(data){                /* var div1=document.getElementById("div1");                div1.innerHTML+=data;  */                /* $("#div1").html(data); */                 var a=data.split(",");                $("#username").val(a[0]);                $("#password").val(a[1]);            }            $.get(url,json,callback);        });    });</script>

阅读全文

0 0