JS原生Ajax&Jquery的Ajax技术&Json

1.介绍Ajax

Ajax = 异步 JavaScript 和 XML

Ajax是一种创建快速动态网页的技术

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以不用整个页面进行刷新而是可以进行局部刷新。这也是使用Ajax 的优点而传统页面如果要更新内容，必须重载整个网站页面。

1.1什么是同步，什么是异步

• 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态
• 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死

1.2Ajax的运行原理

　　页面发起请求，会将请求发送给浏览器内核中的 Ajax 引擎，Ajax 引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。

2.JS原生的Ajax技术

　　js 原生的 Ajax 其实就是使用浏览器内置的 Ajax 引擎，要使用 js 原生的 Ajax 完成异步操作，有如下几个步骤：

1. 创建Ajax引擎对象
2. 为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3. 绑定提交地址
4. 发送请求
5. 接受响应数据

通过异步访问服务器

 function fun1() {
         //1.创建ajax引擎对象----所有的操作都是通过引擎对象
         var xmlHttp = new XMLHttpRequest();

         //2.绑定监听---- 监听服务器是否已经返回响应
         xmlHttp.onreadystatechange = function() {

             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                 //5.接收相应数据
                 var res = xmlHttp.responseText;
                 //alert(res);
                 document.getElementById("span1").innerHTML = res;
             }
         }
         //3.绑定地址
         xmlHttp.open("GET", "/WEB22/ajaxServlet?name=lisi", true);
         //4.发送请求
         xmlHttp.send();
     }

需要注意的是 open 方法第三个参数可以控制是否异步，true是异步，false是同步下面是通过同步访问服务器

 function fn2() {
         //1.创建ajax引擎对象----所有的操作都是通过引擎对象
         var xmlHttp = new XMLHttpRequest();

         //2.绑定监听---- 监听服务器是否已经返回响应
         xmlHttp.onreadystatechange = function() {

             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                 //5.接收相应数据
                 var res = xmlHttp.responseText;
                 //alert(res);
                 document.getElementById("span2").innerHTML = res;
             }
         }
         //3.绑定地址
         xmlHttp.open("POST", "/WEB22/ajaxServlet", false);
         //4.发送请求
         xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         xmlHttp.send("name=wangwu");
     }

此时GET和POST需要注意的是GET可以在直接在服务器使用 request.getParameter("name") 的方式来获取，而POST需要处理一下需要修改一下请求头如上面18行代码，然后在在通过发送send() 方法发送到服务器，发送内容可以写到参数里。

3.Json介绍

因为下面需要使用到Json所以我们先来说一下 Json 刚开始不了解的时候以为是一个很难的东西，但学过之后才发现原来是啦么简单，Json是一种取代 XML 的数据结构，和 XML 相比，它更小巧但描述能力却不差，由于它的小巧所以网络传输数据将减少更多流量从而加快速度。说白了Json就是数据的一种交换方式。

3.1Json的格式与解析

Json有两种格式：

• 对象格式：{"key1":obj,"key2":obj,"key3":obj...}
• 数组/集合格式：[obj,obj,obj...]

eg：user 对象 用 json 数据表示

对象格式：

{"username":"zhr","age":21,"password":"1234","addr":"北京"}　

数组格式var json = {

"shuzu1" : [
            {
                "name" : "小双",
                "age" : 28,
                "addr" : "扬州"
            },
            {
                "name" : "建宁",
                "age" : 18,
                "addr" : "四川"
            },
            {
                "name" : "阿珂",
                "age" : 10,
                "addr" : "山西"
            }
        ],
        "shuzu2" : [
            {
                "name" : "张爽",
                "age" : 25,
                "addr" : "吉林"
            },
            {
                "name" : "建",
                "age" : 18,
                "addr" : "四"
            },
        ]
    };

    alert(json.shuzu1[1].name);//建

var json = {
        "key1" : "value1",
        "key2" : {
            "name" : "小双",
            "age" : 28,
            "addr" : "扬州"
        },
        "key3" : [
            {
                "name" : "小双",
                "age" : 28,
                "addr" : "扬州"
            },
            {
                "name" : "小双",
                "age" : 28,
                "addr" : "扬州"
            },
            {
                "name" : "小双",
                "age" : 28,
                "addr" : "扬"
            }
        ]
    };
    alert(json.key1);         //value1
    alert(json.key2.age);　　  //28
    alert(json.key3[2].addr); //扬

3.2Json 的转换插件

将java的对象或集合转成json形式字符串

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种：

• jsonlib
• Gson：google
• fastjson：阿里巴巴

4.Jquery的Ajax技术

　　jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种

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

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

其中：

• url：代表请求的服务器端地址
• data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
• callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
• type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
• 常用的返回类型：text、json、html等

　　 3.$.ajax( { option1:value1,option2:value2... } );

常用的option有如下：

• async：是否异步，默认是true代表异步
• data：发送到服务器的参数，建议使用json格式
• dataType：服务器端返回的数据类型，常用text和json
• success：成功响应执行的函数，对应的类型是function类型
• type：请求方式，POST/GET
• url：请求服务器端地址

jquery_ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    function fn1(){
        //get异步访问服务器
        $.get(
            "/WEB22/ajaxServlet2",//url地址
            {"name":"张三","age":25},//请求参数
            function(data){//执行成功后的回调函数
                alert(data.name);
            },
            "json"
        );
    }
    function fn2(){
        //post异步访问服务器
        $.post(
            "/WEB22/ajaxServlet2",//url地址
            {"name":"张三","age":25},//请求参数
            function(data){//执行成功后的回调函数
                alert(data.name);
            },
            "json"
        );
    }
    function fn3(){
        $.ajax({
            url:"/WEB22/ajaxServlet2",
            async:"true",
            type:"POST",
            data:{"name":"lucy","age":18},
            success:function(data){
                alert("请求成功"+data.name);
            },
            error:function(data){
                alert("请求失败");
            },
            dataType:"json",

        });
    }
</script>
</head>
<body>
    <input type="button" value="get访问服务器" onclick="fn1()">
    <span id="span1"></span>
    <br>
    <input type="button" value="post访问服务器" onclick="fn2()">
    <span id="span2"></span>
    <br>
    <input type="button" value="ajax访问服务器" onclick="fn3()">
    <span id="span3"></span>
    <br>
</body>
</html>

AjaxServlet.java

package com.zhr.ajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet2 extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        String name= request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println(name+" "+age);

        //java 代码只能返回一个 json格式的字符串
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}