Ajax

1、概念

Ajax，Asynchronous JavaScript And Xml。异步的JavaScript和XML
JavaScript负责发送请求，XML作为一种响应的数据

Ajax主要用来增强用户体验。因为它是浏览器与服务器之间进行异步交互，而无需刷新页面的技术
它只会局部更新页面，而不用刷新整个窗口

2、异步和同步

⑴ 同步请求
当向服务器发请求时，必须得到响应成功后，才能发送其他的请求，有一个等待的过程，而且响应成功后会刷新整个页面

⑵ 异步请求
当向服务器发请求时，不用等响应成功，就可以发送其他请求，不需要等待，而且响应成功后局部刷新页面

3、发送Ajax请求

步骤

⑴ 创建XMLHttpRequest对象
    Ajax的所有操作，都由该对象完成

⑵ 设置请求信息
⑶ 发送请求
⑷ 接收响应

相关函数和属性

XMLHttpRequest

new XMLHttpRequest();
创建XMLHttpRequest对象

open

open(method, url, async, username, password);
设置请求参数

method:请求方式。可选值有GET和POST，不区分大小写url:请求地址async:设置当前请求是否异步【true】；同步【false】。默认是trueusername:用户名password:密码

当发送的请求需要权限时，使用username和password

send

send(body);
发送请求
send方法中传入一个Object类型的请求体。GET请求没有请求体，可以不传

如果是POST请求，则可以在里面写入请求参数字符串，格式：
    键1=值1&键2=值2

setRequestHeader

setRequestHeader(header, value);
设置请求头信息
一般用于：
当发送POST请求时，需要设置一个请求头对请求体中的请求参数进行URL编码

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

注意：
    ⑴ 这是固定写法， 不能修改，否则无效
    ⑵ 当发送POST请求时，如果不添加该语句，则服务器将无法获取请求参数（null）
    ⑶ 该语句需要写在open函数的下面，send函数的上面
    ⑷ GET请求的参数是写在URL地址中的，故该方法对GET请求的参数无效

这个参数就是form表单中的enctype属性

<form enctype="application/x-www-form-urlencoded" ></form>

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码
    application/x-www-form-urlencoded
    在发送前编码所有字符（默认）

responseText

XMLHttpRequest的属性
接收响应的文本内容

注意：不是说已发送请求，就可以接收响应。这期间有一个等待的过程。需要给XMLHttpRequest的onreadystatechange，设置一个事件，来监听是否响应已经就绪

onreadystatechange

onreadystatechange
每当 readyState 改变时，就会触发 onreadystatechange 事件

readyState

XMLHttpRequest的属性
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化

0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪

status

XMLHttpRequest的属性

200: "OK"404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }

responseXML

XMLHttpRequest的属性
接收响应的XML数据

同responseText一样，接收数据时，有一个等待的过程

注意：Servlet发送XML的响应时，需要提前声明响应的类型：

response.setContentType("text/xml;charset=UTF-8");

否则xmlhttp.responseXML无法获取响应的内容（null）

获取XML数据中的子元素的文本内容

⑴ 接收响应的XML数据
    var docEle = xmlhttp.responseXML;

⑵ 获取子元素标签
    var childEle = docEle.getElementsByTagName(“子元素标签名”)[下标];

⑶ 获取子元素标签的第一个子节点（文本节点）
    var textNode = childEle.firstChild;

⑷ 获取文本节点的文本内容
    var text = textNode.nodeValue;

GET请求示例

【JavaScript代码】

<script type="text/javascript">    window.onload = function(){        var btn = document.getElementById("btn");        btn.onclick = function(){            // 创建XMLHttpRequest对象            var xhr = new XMLHttpRequest();            //设置请求信息            xhr.open("GET", "${pageContext.request.contextPath}/ajaxServlet");            // 发送请求【GET请求没有请求体】            xhr.send();            // 给XMLHttpRequest对象，绑定state改变的函数            xhr.onreadystatechange = function(){                // var readyState = xhr.readyState;                // var statusNum = xhr.status;                // console.log(readyState + " : " + statusNum);                // 当请求已完成，且响应已就绪【readyState等于4】                // 当响应状态码为200时                if (4 == xhr.readyState && 200 == xhr.status) {                    // 获取请求内容                    var text = xhr.responseText;                    var h1 = document.getElementById("h1");                    h1.innerHTML = text;                }            };        };    };</script>

【body内容】

<input id="btn" type="button" value="通过按钮发送GET请求" /><h1 id="h1"></h1>

【AjaxServlet】

@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {    resp.setContentType("text/html;charset=UTF-8");    resp.getWriter().println("响应内容");}

POST请求示例

【JavaScript代码】

<script type="text/javascript">    window.onload = function(){        document.getElementById("btn").onclick = function(){            var xmlhttp = new XMLHttpRequest();            xmlhttp.open("POST", "${pageContext.request.contextPath}/ajaxServlet");            // 对POST的请求参数进行URL编码            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            // 发送请求参数            xmlhttp.send("name=张三&password=1234");            xmlhttp.onreadystatechange = function(){                if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {                    var text = xmlhttp.responseText;                    alert(text);                }            };        };    };</script>

【body内容】

<button id="btn">发送POST请求</button>

【AjaxServlet】

@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)        throws ServletException, IOException {    // 设置解析请求参数的编码格式    request.setCharacterEncoding("UTF-8");    String name = request.getParameter("name");    String password = request.getParameter("password");    System.out.println("name: " + name + ", password: " + password);    // 设置响应编码    response.setContentType("text/html;charset=UTF-8");    response.getWriter().write("响应POST请求");}

示例响应数据是XML

【JavaScript代码】

<script type="text/javascript">    window.onload = function(){        document.getElementById("btn").onclick = function(){            var xmlhttp = new XMLHttpRequest();            xmlhttp.open("GET", "${pageContext.request.contextPath}/ajaxServlet");            xmlhttp.send();            xmlhttp.onreadystatechange = function(){                if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {                    // 接收响应的XML数据                    var DocEle = xmlhttp.responseXML;                    // 获取第一个name子元素                    var nameEle = DocEle.getElementsByTagName("name")[0];                    // 获取name元素的第一个子节点                    var nameNode = nameEle.firstChild;                    // 获取节点值                    var name = nameNode.nodeValue;                    alert("name: " + name);                }            };        };    };</script>

【body内容】

<button id="btn">获取XML响应</button>

【AjaxServlet】

@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)        throws ServletException, IOException {    // 设置响应体类型为XML    response.setContentType("text/xml;charset=UTF-8");    String xml =    "<person>" +        "<name>张三</name>" +        "<age>14</age>" +    "</person>";    response.getWriter().write(xml);}

4、兼容IE5和IE6

问题

由于IE5和IE6不认识XMLHttpRequest，所以IE5和IE6无法使用XMLHttpRequest

这时就需要使用ActiveX 对象

 new ActiveXObject("Microsoft.XMLHTTP");

通过这种方式得到的对象，就可以使用Ajax了

封装一个函数，用来创建对象

function createXMLHttp() {    var xmlhttp;    try {        xmlhttp = new XMLHttpRequest();    } catch (e) {        // 出错了，就创建ActiveXObject对象        try {            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");        } catch (e) {            alert("您的浏览器不支持Ajax！");        }    }    return xmlhttp;};

再创建对象的时候，就调用函数即可：

var xmlhttp = createXMLHttp();

5、JSON

概念

JavaScript Object Notation，JavaScript的对象表示法。是一种轻量级的数据交换格式
它是一种可以跨平台，跨语言的数据交换格式
由于XML格式的数据，解析复杂、性能差，所以现在基本已被JSON所代替

对比：
【XML格式数据】

 <person>   <name>张三</name>   <age>14</age> </person>

【JSON格式数据】

 {"name":"张三", "age":14}

JSON格式

JSON对象

{“属性名1”:”属性值1”, “属性名2”:”属性值2”, …}

注意事项：
⑴ 属性名必须使用双引号（”“）引起来
⑵ 属性名和属性值之间用冒号（:）分割
⑶ 多个属性之间，用逗号（,）分割

JSON数组

[属性值1, 属性值2, 属性值3, …]

多个属性值之间用逗号（,）分割

JSON属性可以使用的类型

 字符串 数字 布尔类型 null 对象 数组

在JavaScript中JSON对象与JSON字符串互转

JSON字符串转JSON对象

JSON.parse(JSON字符串);

得到一个Object类型的JSON对象

JSON对象转JSON字符串

JSON.stringify(JSON对象);

得到一个JSON字符串

使用示例

// 创建JSON字符串var jsonStr = '{"name":"张三", "age":14}';// 创建JSON对象var jsonObj = {    "name":"李四",    "age":12};// 将JSON字符串转换为JSON对象var Object = JSON.parse(jsonStr);// 获取name属性值alert(Object.name);// 将JSON对象转换为JSON字符串var str = JSON.stringify(jsonObj);alert(typeof str);alert(str);

在Java中JSON对象与JSON字符串互转

方法

需要调用Gson类里的方法，导入gson-2.2.4.jar包

new Gson();

创建一个Gson对象

public String toJson(Object src) {}

将Object对象转换为JSON字符串

public <T> T fromJson(String json, Class<T> classOfT) throws JsonSyntaxException {}

将JSON字符串转换为Object类型的对象

使用示例

【Person（JavaBean）】

String类型的name和age，提供有参构造，重写toString方法

【JavaScript代码】

<script type="text/javascript">    window.onload = function(){        document.getElementById("btn").onclick = function(){            var xmlhttp = new XMLHttpRequest();            xmlhttp.open("POST", "${pageContext.request.contextPath}/ajaxServlet");            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            // 创建JSON字符串            var jsonStr = '{"name":"张三", "age":14}';            // 发送请求            xmlhttp.send("jsonStr=" + jsonStr);            xmlhttp.onreadystatechange = function(){                if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {                    var respJSONStr = xmlhttp.responseText;                    alert(respJSONStr);                    // 将获取到的JSON字符串转换为JSON对象                    var jsonObj = JSON.parse(respJSONStr);                    alert(jsonObj.name);                }            };        };    };</script>

【body内容】

<button id="btn">发送JSON对象，获取JSON字符串</button>

【AjaxServlet】

@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)        throws ServletException, IOException {    // 设置请求字符集编码    request.setCharacterEncoding("UTF-8");    // 设置相应字符类型    response.setContentType("text/html;charset=UTF-8");    // 获取请求参数【JSON字符串】    String jsonStr = request.getParameter("jsonStr");    // 创建Gson对象    Gson gson = new Gson();    // 转换为Object    Object obj = gson.fromJson(jsonStr, Person.class);    System.out.println(obj);    // 创建一个Person对象    Person person = new Person("李四", "12");    // 将对象转换为JSON字符串    String respJSONStr = gson.toJson(person);    response.getWriter().write(respJSONStr);}

测试将Map集合转换为JSON字符串

    Map<String, Person> map = new HashMap<String, Person>();    map.put("p1", new Person(1, "张三", 14));    map.put("p2", new Person(2, "李四", 17));    map.put("p3", new Person(3, "王五", 12));    Gson gson = new Gson();    /*     * {     *      "p1":{     *          "id":1,     *          "name":"张三",     *          "age":14     *      },     *      "p2":{     *          "id":2,     *          "name":"李四",     *          "age":17     *      },     *      "p3":{     *          "id":3,     *          "name":"王五",     *          "age":12     *      }     * }     */    String jsonStr = gson.toJson(map);    System.out.println(jsonStr);    /*     * {     *      p1={     *          id=1.0,     *          name=张三,     *          age=14.0     *      },     *      p2={     *          id=2.0,     *          name=李四,     *          age=17.0     *      },     *      p3={     *          id=3.0,     *          name=王五,     *          age=12.0     *      }     * }     */    Object obj = gson.fromJson(jsonStr, Map.class);    System.out.println(obj);

6、使用jQuery发送Ajax请求

发送GET请求

 $.get(url, [data], [callback], [type]);

url:待载入页面的URL地址
data:待发送 Key/value 参数。一个Object类型的对象
callback:载入成功时回调函数
type:返回内容格式，xml, html, script, json, text, _default

发送POST请求

 $.post(url, [data], [callback], [type]);

其参数和get函数里的参数一样

默认获取的响应类型为JSON

  $.getJSON(url, [data], [callback]);

其参数和get函数里的前三个参数一样

Tips：该函数等同于

$.get(url, [data], [callback], "json");

即最后一个参数【获取到的响应的格式】指定为了json

注意：
    ⑴ 该函数需要调用Servlet中的doGet方法来处理请求
    ⑵ 响应参数是JSON字符串，其会被自动转换为JSON对象[object Object]

测试GET和POST请求

【jQuery代码】

<script type="text/javascript">    $(function(){        $("#getBtn").click(function(){            // 请求地址            var url = "${pageContext.request.contextPath}/ajaxServlet";            // 请求参数            var data = {                "name":"张三",                "age":14            };            // 响应成功的回调函数            var fun = function(data){                alert(data);            };            // 响应类型            var type = "text";            $.get(url, data, fun, type);        });        $("#postBtn").click(function(){            var url = "${pageContext.request.contextPath}/ajaxServlet";            $.post(url, function(data){                alert(data);            }, "text");                 });    });</script>

【body内容】

<input id="getBtn" type="button" value="发送GET请求" /><br /><br /><input id="postBtn" type="button" value="发送POST请求" />

【AjaxServlet】

@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)        throws ServletException, IOException {    String name = request.getParameter("name");    String age = request.getParameter("age");    System.out.println("name: " + name + ", age: " + age);    response.setContentType("text/html;charset=UTF-8");    response.getWriter().write("响应GET请求");}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)        throws ServletException, IOException {    response.setContentType("text/html;charset=UTF-8");    response.getWriter().write("响应POST请求");}

测试接收JSON响应

【Person（JavaBean）】

String类型的name和age，提供有参构造

【jQuery代码】

<script type="text/javascript">    $(function(){        $("#getJSONBtn").click(function(){            var url = "${pageContext.request.contextPath}/ajaxServlet";            $.getJSON(url, function(data){                alert(data);                alert(data.name);            });        });        $("#getBtn").click(function(){            var url = "${pageContext.request.contextPath}/ajaxServlet";            $.get(url, function(data){                alert(data);                alert(data.name);            }, "json");        });    });</script>

【body内容】

<input id="getJSONBtn" type="button" value="通过getJSON函数获取JSON字符串响应" /><br /><br /><input id="getBtn" type="button" value="通过get函数获取JSON字符串响应" />

【AjaxServlet】

@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)        throws ServletException, IOException {    Person person = new Person("张三", "14");    Gson gson = new Gson();    String jsonStr = gson.toJson(person);    response.setContentType("text/html;charset=UTF-8");    response.getWriter().write(jsonStr);}