JSON&amp;Ajax介绍和实例

JSON&Ajax介绍和实例

.JSON介绍

JSON指的是JavaScript对象表示法（ JavaScript Object Notation），JSON的本质仍然是JavaScript对象
JSON是轻量级的文本数据交互格式，也是前后端进行数据通讯的一种格式：
JSON独立于语言，即java，PHP，asp.net，go等都可以使用json
JSON具有自我描述性，更易理解。一句话，JSON很好用。

2.JSON快速入门

2.1JSON的定义格式

var 变量名={    "k1":value,//Number类型    "k2":"str",//字符串类型    "k3":[],//数组类型    "k4":{},//json对象类型    "k5":[{},{}]//json数组};

例子：

var myJson={    "key1":1234,//Number类型    "key2":"Hello",//字符串类型    "key3":[1,"he llo",2.3],//数组类型    "key4":{"age":12,"name":"jack"},//json对象类型    "key5":[  //json数组        {"k1":10,"k2":"milan"},        {"k3":30,"k4":"smith"}    ]};

2.2格式规则

k-v形式，然后v中又可以嵌套k-v，并且每对k-v之间用逗号隔开

映射（元素/属性）用冒号:表示，"名称":值，注意名称是字符串，因此要用双引号括起来
并列的数据之间用逗号,分隔，如"名称1":值,"名称2":值
映射的集合（对象）用大括号{}表示，如{"名称1":值,"名称2":值}
并列数据的集合（数组）用方括号[]表示，如[{"名称1":值,"名称2":值},{"名称1":值,"名称2":值}]
元素值类型：string，number，object，array，true，false，null

2.3入门案例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>json快速入门案例</title>    <script type="text/javascript">        window.onload=function () {            /**             * myJson 就是一个json对象             */            var myJson={                "key1": 1234,//Number类型                "key2": "Hello",//字符串类型                "key3": [1, "hello", 2.3],//数组类型                "key4": {"age": 12, "name": "jack"},//json对象                "key5": [  //json数组                    {"k1": 10, "k2": "milan"},                    {"k3": 30, "k4": "smith"}                ]            };             // 演示如何获取到json对象的各个属性/key            // 1.取出key1            console.log("key1=", myJson.key1);            // 2.取出key3            //这里使用逗号来避免myJson.key3变成字符串            console.log("key3=", myJson.key3);            // 可以对key3取出的值（array）遍历            for (var i=0; i < myJson.key3.length; i++) {                //使用下标取出数组的值                console.log("第%i个元素的值=", i, myJson.key3[i]);            }            //3.取出key4            console.log("key4=", myJson.key4)            console.log("key4.name=", myJson.key4.name)            //4.取出key5            console.log("key5=", myJson.key5)            console.log("取出key5的第二个数组的key4值=", myJson.key5[1].k4)        }    </script></head><body><h1>json快速入门案例</h1></body></html>

打开浏览器控制台，输出如下：

3.JSON对象和字符串对象转换

JSON.stringify(json)：将一个json对象转换成为json字符串
JSON.parse(jsonString)：将一个json字符串转换成为json对象
转换前提是传入的字符串的格式必须满足json格式

3.1应用实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JSON对象和字符串对象转换</title>    <script type="text/javascript">        window.onload=function () {            //解读JSON            //1.JSON是一个js的内置对象(build-in),可以直接使用，不需要创建            console.log(JSON);             //演示如何将一个JSON对象转成-->String            var jsonPerson={                "name": "jack",                "age": 23            }            console.log("jsonPerson=", jsonPerson, " jsonPerson类型=", typeof jsonPerson);            var strPerson=JSON.stringify(jsonPerson);            console.log("strPerson=", strPerson, " strPerson类型=", typeof strPerson);             //演示如何将一个String对象转成-->JSON            //注意转成json对象的字符串格式必须满足json格式            var strDog="{\"name\":\"小黄狗\",\"age\":2}";            var jsonDog=JSON.parse(strDog);            console.log("jsonDog=", jsonDog)        }    </script></head><body><h1>JSON对象和字符串对象转换</h1></body></html>

打开浏览器控制台，输出如下：

3.2注意事项和细节

JSON.stringify(json对象)会返回对应的string，并不会影响原来json对象
JSON.parse(jsonString)方法会返回对应的json对象，并不会影响原来的string
在定义Json对象时，可以使用单引号''或者双引号""表示字符串，甚至前面的key可以不用任何引号
比如var json_person={"name":"jack","age":100};
也可以写成var json_person={'name':'jack','age':100};
或者是var json_person={name:"jack",age:100};
但是在把原生字符串转成json对象时，必须使用双引号""，否则会报错
JSON.springfiy(json对象)方法返回的字符串都是双引号""表示的字符串，所以在语法格式正确的情况下，是可以重新转成json对象的。

例子

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JSON和字符串转换的注意事项和细节</title>    <script type="text/javascript">        window.onload=function () {            var jsonPerson={                "name": "jack",                "age": 22            }             //1.JSON.stringify(json对象)会返回对应的string，并不会影响原来json对象            var strPerson=JSON.stringify(jsonPerson);            console.log("jsonPerson=", jsonPerson);             //2.JSON.parse(jsonString)方法会返回对应的json对象，并不会影响原来的string            var strDog="{\"name\":\"小黄狗\",\"age\":2}";            var jsonDog=JSON.parse(strDog);            console.log("strDog=", strDog, "类型=", typeof strDog)             //3.在定义Json对象时，可以使用单引号或者双引号表示字符串            // 甚至前面的key可以不用任何引号            var jsonCat={                name: '猫猫',                age: 2            }            console.log("jsonCat=", jsonCat);             //4.但是在把原生字符串转成json对象时，必须使用双引号""，否则会报错            //例如：            var str_dog2="{name:'小黄狗',age:2}";            // JSON.parse(str_dog2);--报错             //JSON.springfiy(json对象)返回的字符串都是双引号`""`表示的字符串，            // 所以在语法格式正确的情况下，是可以重新转成json对象的            var strCat=JSON.stringify(jsonCat);            var parse=JSON.parse(strCat);            console.log("parse=", parse)        }    </script></head><body><h1>JSON和字符串转换的注意事项和细节</h1></body></html>

打开浏览器控制台，输出如下：

4.JSON在Java中使用

前面讲述的是前端页面中json对象和字符串之间的转化。在实际开发中，前端将json格式的字符串发送给后端，后端拿到后，可以将其转成java对象，进行其他操作，并可以在业务操作后，重新向前端发送json格式的字符串。

这意味着在Java后端中，同样有对象和字符串对象转换的需求。

4.1说明

Java中使用json，需要引入第三方的包 gson.jar
Gson是Google提供的用来在Java对象和 JSON数据之间进行映射的Java类库
可以对JSON字符串和Java对象相互转换

4.2JSON在Java中的应用场景

Javabean对象和json字符串的相互转换
List对象和json字符串的相互转换
Map对象和json字符串的相互转换

4.3Java对象和JSON字符串互转

在项目中的lib目录下将gson.jar文件复制过来，点击add as library作为库

Javabean：Book类

package com.li.json; //这是一个Javabeanpublic class Book {    private Integer id;    private String name;     public Book(Integer id, String name) {        this.id=id;        this.name=name;    }     public Integer getId() {        return id;    }     public void setId(Integer id) {        this.id=id;    }     public String getName() {        return name;    }     public void setName(String name) {        this.name=name;    }     @Override    public String toString() {        return "Book{" +                "id=" + id +                ", name='" + name + '\'' +                '}';    }}

JavaJson：

package com.li.json; import com.google.gson.Gson; public class JavaJson {    public static void main(String[] args) {        //创建一个gson对象，作为一个工具对象使用        Gson gson=new Gson();         //演示Javabean和json格式字符串的转换        Book book=new Book(10001, "三国演义");         //1.演示把一个Javabean转成json格式的字符串        String strBook=gson.toJson(book);        System.out.println("strBook=" + strBook);         //2.json字符串-->JavaBean        //(1)strBook 就是json字符串        //(2)Book.class 指定将json字符串转成Book类型的对象        //(3)底层使用反射机制来完成        Book book2=gson.fromJson(strBook, Book.class);        System.out.println("book2=" + book2);    }}

4.4List对象和JSON字符串互转

Book类见4.3

JavaJson：

package com.li.json; import com.google.gson.Gson;import com.google.gson.reflect.TypeToken; import java.lang.reflect.Type;import java.util.ArrayList;import java.util.List; public class JavaJson {    public static void main(String[] args) {        //创建一个gson对象，做为一个工具对象使用        Gson gson=new Gson();         //3.演示把List对象-->json字符串        ArrayList<Book> bookList=new ArrayList<>();        bookList.add(new Book(100, "天龙八部"));        bookList.add(new Book(200, "红楼梦"));         //因为把一个对象或者集合转成字符串，相对比较简单        //底层只需要遍历，按照json格式拼接返回即可        String strBookList=gson.toJson(bookList);        System.out.println("strBookList=" + strBookList);         //4.把json字符串转成-->list对象        //(1)如果要把json字符串，转成 集合 这种比较复杂的类型，需要使用Gson提供的一个类：TypeToken        //(2)这个TypeToken类在com.google.gson.reflect下面，在反射对象的时候使用        //(3)TypeToken 是一个自定义泛型类，通过TypeToken来指定我们需要转换成的类型        /*         * public class TypeToken<T> {         *     final Class<? super T> rawType;         *     final Type type;         *     final int hashCode;         *         *     protected TypeToken() {         *         this.type=getSuperclassTypeParameter(this.getClass());         *         this.rawType=Types.getRawType(this.type);         *         this.hashCode=this.type.hashCode();         *     }         *     ...         *     ...         *  }         */          /*        TypeToken        (1)下面的语句new TypeToken<List<Book>>(){}.getType()，          返回类型的完整的路径 java.util.List<com.li.json.Book>        (2)gson的设计者需要得到类型的完整路径，然后进行底层的反射        (3)所以gson设计者提供了一个TypeToken类来搞定         */        Type type=new TypeToken<List<Book>>(){}.getType();        System.out.println(type.getClass());//class com.google.gson.internal.$Gson$Types$ParameterizedTypeImp         // System.out.println("type=" + type);//java.util.List<com.li.json.Book>         List<Book> bookList2=gson.fromJson(strBookList, type);        System.out.println("bookList2="+bookList2);    }}

4.4.1TypeToken

TypeToken类的作用是：得到类型的完整路径，然后进行底层的反射

Type type=new TypeToken<List<Book>>(){}.getType();

一个问题，TypeToken为什么要加{}?

如果我们把下面语句中的 {} 去掉，会提示
'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken'
因为TypeToken的无参构造器是protected的，而语句TypeToken<List<Book>>()就是调用其无参构造器。我们知道，如果一个方法是protected，并且和当前类不在同一个包，那么就没有该方法的访问权限，因此报错。

那为什么加上{} ,就可以访问了呢？这里涉及到匿名内部类的知识。
当我们这样使用的时候：new TypeToken<List<Book>>(){} ，其实这个类型就不是TypeToken，而是一个匿名内部类（可以理解为TypeToken的一个子类）
而且这个匿名内部类有自己的无参构造器(隐式)，根据java基础，当执行子类的无参构造器时，默认调用super(); 到父类的无参构造器执行

我们在Type type=new TypeToken<List<Book>>() {}.getType();处打上断点，并在TypeToken类中的无参构造器旁也打上断点。点击debug，点击Resume Program按钮

可以看到光标跳转到TypeToken类中的无参构造器：

再点击step over，可以看到，type属性拿到了类型的完整路径，这样才能去进行底层的反射

4.4.2二说TypeToken

我们用两个类来模拟一下上述4.4.1的过程

在src目录下创建两个包：t1和t2，在t1中创建一个A类，在t2中创建一个Test类

A类：

package com.li.t1; public class A<T> {    protected A() {        System.out.println("A 的protected A() 被调用...");    }}

这时如果在Test类中new一个A类对象，那么将会报错，原因就是被 protected 修饰的成员对于本包和其子类可见。而A和Test类既不在同一个包，也不是继承关系。这和4.4.1报错的原因完全一致。

实际上，protected的可见性在于两点：1.基类的 protected 成员是包内可见的，并且对子类可见；2.若子类与基类不在同一包中，那么在子类中，子类实例可以访问其从基类继承而来的protected方法，而不能访问基类实例的protected方法。
Java protected 关键字详解 | 菜鸟教程 (runoob.com)

package com.li.t2; import com.li.t1.A; public class Test {    public static void main(String[] args) {        A a=new A<String>() {};        //1.因为A类和Test类不在同一个包，也不是继承关系，不能访问A的protected成员，包括构造器        //2. A(){}就是一个匿名内部类，可以理解成A的子类        //3. A(){} 有一个隐式的无参构造器，会调用super()        //4. 当你执行 new A(){} 时，会调用A类的 protected无参构造器        // 泛型+匿名内部类        System.out.println(a.getClass());//class com.li.t2.Test    }}

4.5Map对象和JSON字符串互转

Book类见4.3

JavaJson：

package com.li.json; import com.google.gson.Gson;import com.google.gson.reflect.TypeToken; import java.lang.reflect.Type;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map; public class JavaJson {    public static void main(String[] args) {        //创建一个gson对象，做为一个工具对象使用        Gson gson=new Gson();         //5.把map对象转成-->json字符串        HashMap<String, Book> bookMap=new HashMap<>();        bookMap.put("k1", new Book(400, "射雕英雄传"));        bookMap.put("k2", new Book(500, "楚留香传奇"));        String strBookMap=gson.toJson(bookMap);        System.out.println("strBookMap=" + strBookMap);         //6.json字符串转成-->map对象        //new TypeToken<Map<String,Book>>(){}.getType()        //===> java.util.Map<java.lang.String, com.li.json.Book>        Map<String,Book> bookMap2=gson.fromJson(strBookMap,                new TypeToken<Map<String,Book>>(){}.getType());        System.out.println(bookMap2);    }}

1.Ajax基本介绍

1.1Ajax是什么

AJAX 即“Asynchronous JavaScript And XML”（异步JavaScript和XML）
Ajax 是一种浏览器异步发起请求（指定发哪些数据），局部更新页面的技术
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。而使用Ajax，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX），如果没有得到服务器的响应，浏览器程序会处于一个等待挂起的状态，无法执行其他操作，直至得到http响应。

1.2Ajax经典应用场景

搜索引擎根据用户输入关键字，自动提示检索关键字
动态加载数据，按需取得数据 [树形菜单，联动菜单]
改善用户体验 [输入内容前提示，带进度条文件上传]
电子商务应用 [购物车，邮件订阅]
访问第三方服务 [访问搜索服务，rss阅读器]
页面局部刷新

Ajax的三个特点异步请求发送指定数据局部刷新

2.Ajax原理示意图

2.1传统的web应用数据通信方式

传统web应用数据通信方式

浏览器发出http请求（携带数据username=xxx&pwd=xxx）
服务端接收数据，并处理
通过http响应，把数据返回给浏览器

缺点：

表单提交是把该表单的所有数据都提交给服务端，数据量大，没有意义
在服务端没有响应前，浏览器前端页面处于等待状态，处于一个挂起的状态
不能进行局部刷新页面，而是刷新整个页面

2.2Ajax数据通信方式

Ajax数据通信方式：

浏览器发出http请求，使用XMLHttpRequest对象
服务端接收数据，并处理
通过http响应，把数据返回给浏览器（返回的数据格式可以多样如json，xml，普通文本）

优点：

可以通过XMLHttpReques对象，发送指定数据，数据量小，速度快
XMLHttpReques是异步发送，在服务端没有Http响应前，浏览器不需要等待，用户可以进行其他操作
可以进行局部刷新，提高了用户体验

3.JavaScript原生Ajax请求

3.1Ajax文档

AJAX - XMLHttpRequest 对象 (w3school.com.cn)

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

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

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

3.2应用实例

演示JavaScript发送原生Ajax请求的案例

在输入框输入用户名
点击验证用户名，使用ajax方式，服务端验证该用户名是否已经被占用，如果已经被占用，以json格式返回该用户信息
假定用户名为king，就不可用，其他用户名可以（后面我们接入DB）
对页面进行局部刷新，显示返回信息
思考：为什么直接返回用户名是否可用信息？==>为什么返回json格式的字符串？
可以根据返回的json可以做更多的业务操作。

思路

首先创建一个新项目，添加web支持(暂时不使用maven)
在web-inf文件夹下添加lib目录，添加servlet和json的相关jar包
配置Tomcat服务器
创建login.html，使用ajax
大致的流程是：用户点击验证用户名按钮后，操作dom获取填写的用户名，然后创建XMLHttpRequest对象[ajax引擎对象]，调用XMLHttpRequest 对象的 open() 和 send() 方法
在open中设置三个参数：1.请求方式、2.请求url（如果是get请求，url需包括请求参数）、3.是否使用异步发送
给XMLHttpRequest对象绑定一个事件onreadystatechange，该事件的触发时机是XMLHttpRequest的readyState状态改变。
readyState状态详见：AJAX - 服务器响应 (w3school.com.cn)
然后调用send方法真正发送ajax请求（如果是post请求，参数就是在send方法中设置）
根据readyState的状态判断请求已完成且响应已就绪，然后进行业务操作。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>用户注册</title>    <script type="text/javascript">        window.onload=function () {//页面加载完毕后执行function            var checkButton=document.getElementById("checkButton");            checkButton.onclick=function () {                //1.创建XMLHttpRequest对象[ajax引擎对象]                var xhr=new XMLHttpRequest();                 //2.准备发送指定数据                // 2.1获取用户填写的用户名                var username=document.getElementById("uname").value;                 // 2.2XMLHttpRequest 对象的 open() 和 send() 方法                // (1)"GET" 请求方式，也可以是post                // (2)"/ajax/checkUserServlet?username="+username 就是url                // (3) true表示异步发送                xhr.open("GET", "/ajax/checkUserServlet?username=" + username, true);                 //2.3在send方法调用前，给XMLHttpRequest对象绑定一个事件==>onreadystatechange                //每当XMLHttpRequest对象的 readyState 改变时，就会触发 onreadystatechange 事件                xhr.onreadystatechange=function () {                    //如果请求已完成，并且响应已经就绪，并且状态码是200                    if (xhr.readyState==4 && xhr.status==200) {                        //把返回的json数据显示在div上                        document.getElementById("div1").innerText=xhr.responseText;                        // console.log("xhr=", xhr);                        //处理XMLHttpRequest对象中拿到的数据                        var responseText=xhr.responseText;                        // console.log("返回的信息="+responseText);                        if (responseText !="") {                            //根据在servlet设置的逻辑，如果返回的数据不是空串，说明该用户名不可用                            document.getElementById("myres").value="用户名不可用";                        } else {                            document.getElementById("myres").value="用户名可用";                        }                     }                }                                //2.4真正发送ajax请求[底层还是http请求]                //如果前面open的第一个参数指定的是post请求，那么post的参数在send中指定                //如果open的第一个参数指定的是get请求，那么send中不需要写任何数据，因为前面已经在url中指定了                xhr.send();            }        }    </script></head><body><h1>用户注册</h1><form action="/ajax/checkUserServlet" method="post">    用户名字:<input type="text" name="username" id="uname">    <input type="button" id="checkButton" value="验证用户名">    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>    用户密码:<input type="password" name="password"><br/><br/>    电子邮件:<input type="text" name="email"><br/><br/>    <input type="submit" value="用户注册"></form><h1>返回的 json 数据</h1><div id="div1"></div></body></html>

在web.xml中配置servlet

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"         version="4.0">    <servlet>        <servlet-name>CheckUserServlet</servlet-name>        <servlet-class>com.li.ajax.servlet.CheckUserServlet</servlet-class>    </servlet>    <servlet-mapping>        <servlet-name>CheckUserServlet</servlet-name>        <url-pattern>/checkUserServlet</url-pattern>    </servlet-mapping></web-app>

CheckUserServlet：如果接收到的用户名为king，就将其信息以json形式返回前端页面，如果是其他名字，就返回空串。

package com.li.ajax.servlet; import com.google.gson.Gson;import com.li.ajax.entity.User; import javax.servlet.*;import javax.servlet.http.*;import java.io.IOException;import java.io.PrintWriter; public class CheckUserServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doPost(request, response);    }     @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //System.out.println("CheckUserServlet 被调用...");         //接收ajax提交的数据        request.setCharacterEncoding("utf-8");        response.setContentType("text/html;charset=utf-8");        String username=request.getParameter("username");//参数名取决于url中的参数名        System.out.println("uname=" + username);         //如果用户名为king，就认为是不可用的        if ("king".equals(username)) {//假定king已经有人使用了             //后面这个信息是从数据库db来获取的            User king=new User(100, "king", "6666", "king@qq.com");            //把king 对象转成 json 格式的字符串            String strKing=new Gson().toJson(king);            //返回信息            response.getWriter().print(strKing);        } else {            //如果用户名可用，返回空串即可            response.getWriter().print("");        }    }}

Javabean，为了完成对象-->json字符串的需求

package com.li.ajax.entity; /** * User类就是一个Javabean/pojo/entity/domain */public class User {    private Integer id;    private String name;    private String pwd;    private String email;     public User(Integer id, String name, String pwd, String email) {        this.id=id;        this.name=name;        this.pwd=pwd;        this.email=email;    }     public Integer getId() {        return id;    }     public void setId(Integer id) {        this.id=id;    }     public String getName() {        return name;    }     public void setName(String name) {        this.name=name;    }     public String getPwd() {        return pwd;    }     public void setPwd(String pwd) {        this.pwd=pwd;    }     public String getEmail() {        return email;    }     public void setEmail(String email) {        this.email=email;    }}

3.3练习

需求分析：到数据库中验证用户名是否可用

点击验证用户名，到数据库中验证用户名是否可用
自己设计创建数据库ajaxdb，创建users表
使用ajax方式，服务端验证该用户名是否已经被占用了，若已经被占用，以json格式返回该用户信息
对页面进行局部刷新，显示返回信息
提示：[Mysql+JDBC+数据库连接池]

只需在前面的应用实例中进行升级改进，接入DB

项目的整体架构：

3.3.1创建数据库表格

# 创建数据库CREATE DATABASE ajaxdb;# 创建users表CREATE TABLE `user` ( id INT(11) PRIMARY KEY, `username` VARCHAR(32) UNIQUE NOT NULL DEFAULT '', pwd CHAR(32) NOT NULL DEFAULT '', email VARCHAR(32) NOT NULL DEFAULT '')CHARSET utf8 COLLATE utf8_bin ENGINE INNODB; #插入测试数据INSERT INTO `user` VALUES(100,"king",MD5('123'),"king@qq.com");INSERT INTO `user` VALUES(200,"queen",MD5('666'),"queen@qq.com");INSERT INTO `user` VALUES(300,"princess",MD5('999'),"princess@163.com"); SELECT * FROM `user`;DESC `user`;#drop table `user`; #完成的工作SELECT COUNT(*) FROM `user` WHERE `username`="king"

3.3.2创建工具类JdbcUtilsByDruid

在项目的lib库下添加德鲁伊，Apache-DBUtils，mysql-connect数据库连接驱动

数据库连接池详见：javase基础-jdbc和数据库连接池

在项目src目录下添加德鲁伊配置文件

#key=valuedriverClassName=com.mysql.jdbc.Driverurl=jdbc:mysql://localhost:3306/ajaxdb?rewriteBatchedStatements=trueusername=rootpassword=123456#initial connection SizeinitialSize=10#min idle connecton sizeminIdle=5#max active connection sizemaxActive=20#max wait time (5000 mil seconds)maxWait=5000

创建德鲁伊工具类JDBCUtilsByDruid

package com.li.ajax.utils; import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sql.DataSource;import java.sql.*;import java.util.Properties; /** * 基于Druid数据库连接池的工具类 */public class JDBCUtilsByDruid {     private static DataSource ds;     //在静态代码块完成ds的初始化    //静态代码块在加载类的时候只会执行一次，因此数据源也只会初始化一次    static {        Properties properties=new Properties();        try {            /**             * 注意，目前我们是javaweb方式启动             * 在web项目下要得到资源文件，需要使用类加载器，             * 得到它真正执行的目录下的out/artifacts/项目名/WEB-INF/classes目录中的资源             */            properties.load(JDBCUtilsByDruid.class.getClassLoader()                    .getResourceAsStream("druid.properties"));            //方式二：也可以使用绝对路径            //properties.load(new FileInputStream("D:\IDEA-workspace\ajax\src\druid.properties"));            ds=DruidDataSourceFactory.createDataSource(properties);        } catch (Exception e) {            e.printStackTrace();        }    }     //编写getConnection方法    public static Connection getConnection() throws SQLException {        return ds.getConnection();    }     //关闭连接（注意：在数据库连接池技术中，close不是真的关闭连接，而是将Connection对象放回连接池中）    public static void close(ResultSet resultSet, Statement statemenat, Connection connection) {        try {            if (resultSet !=null) {                resultSet.close();            }            if (statemenat !=null) {                statemenat.close();            }            if (connection !=null) {                connection.close();            }        } catch (SQLException e) {            throw new RuntimeException(e);        }    }}

3.3.3BaseDAO

package com.li.ajax.dao; import com.li.ajax.utils.JDBCUtilsByDruid;import org.apache.commons.dbutils.QueryRunner;import org.apache.commons.dbutils.handlers.BeanHandler; import java.sql.*; /** * 开发BasicDAO，是其他DAO的父类 */public class BaseDAO<T> {//泛型指定具体的类型     private QueryRunner queryRunner=new QueryRunner();     //查询单行结果 的通用方法（单行多列）    public T querySingle(String sql, Class<T> clazz, Object... parameters) {        Connection connection=null;        try {            connection=JDBCUtilsByDruid.getConnection();            return queryRunner.query(connection, sql, new BeanHandler<T>(clazz), parameters);         } catch (SQLException e) {            throw new RuntimeException(e);//将一个编译异常转变为运行异常        } finally {            JDBCUtilsByDruid.close(null, null, connection);        }    }     //根据业务需求还可以有多行多列查询，单行多列插叙，单行单列查询等    //这里不再列举，详见javase基础-满汉楼BasicDAO}

3.3.4User类

修改3.2中的Javabean--User类

package com.li.ajax.entity; /** * User类就是一个Javabean/pojo/entity/domain */public class User {    private Integer id;    private String username;    private String pwd;    private String email;     public User() {//注意，一定要有一个空的构造器，方便底层进行反射！！    }     public User(Integer id, String username, String pwd, String email) {        this.id=id;        this.username=username;        this.pwd=pwd;        this.email=email;    }     public Integer getId() {        return id;    }     public void setId(Integer id) {        this.id=id;    }     public String getUsername() {        return username;    }     public void setUsername(String username) {        this.username=username;    }     public String getPwd() {        return pwd;    }     public void setPwd(String pwd) {        this.pwd=pwd;    }     public String getEmail() {        return email;    }     public void setEmail(String email) {        this.email=email;    }     @Override    public String toString() {        return "User{" +                "id=" + id +                ", username='" + username + '\'' +                ", pwd='" + pwd + '\'' +                ", email='" + email + '\'' +                '}';    }}

3.3.5UserDAO

package com.li.ajax.dao; import com.li.ajax.entity.User; /** * 对user表的增删查改 */public class UserDAO extends BaseDAO<User> {    //我们的UserDAO继承了BasicDAO，并指定了User    //这时我们就可以使用BasicDAO中的方法}

3.3.6UserService

package com.li.ajax.service; import com.li.ajax.dao.UserDAO;import com.li.ajax.entity.User;import org.testng.annotations.Test; import java.sql.SQLException; /** * UserService 提供业务方法 */public class UserService {    //添加属性UserDAO，方便操作    private UserDAO userDAO=new UserDAO();     //根据用户名返回对应的user对象，如果没有则返回null    @Test    public User getUserByName(String username) throws SQLException {        //使用 User.class 的目的是底层反射创建对象，而反射是调用的无参构造器去创建类，        // 因此在对应的实体类中一定要有无参构造器！！！        User user=      userDAO.querySingle("SELECT * FROM `user` WHERE `username`=?", User.class, username);        return user;    }}

3.3.7CheckUserServlet

package com.li.ajax.servlet; import com.google.gson.Gson;import com.li.ajax.entity.User;import com.li.ajax.service.UserService; import javax.servlet.*;import javax.servlet.http.*;import java.io.IOException;import java.sql.SQLException; public class CheckUserServlet extends HttpServlet {    //定义一个UserService属性    private UserService userService=new UserService();     @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doPost(request, response);    }     @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //System.out.println("CheckUserServlet 被调用...");         //接收ajax提交的数据        request.setCharacterEncoding("utf-8");        response.setContentType("text/html;charset=utf-8");        String username=request.getParameter("username");//参数名取决于url中的参数名        System.out.println("uname=" + username);         //从数据库中查找有无相同的用户名        try {            User userByName=userService.getUserByName(username);            if (userByName !=null) {//说明用户名存在                // 返回该User对象的json格式的字符串                String strUser=new Gson().toJson(userByName);                //给浏览器返回信息                response.getWriter().print(strUser);            } else {                //如果返回了null，说明没有重名的用户                //用户名可用，返回空串即可                response.getWriter().print("");            }        } catch (SQLException e) {            e.printStackTrace();        }    }}

3.3.8login.html

详见3.2应用实例

3.3.9测试

重启Tomcat，在浏览器中访问http://localhost:8080/ajax/login.html

4.jQuery的Ajax请求

原生Ajax请求问题分析：

编写原生的Ajax要写很多的代码，还要考虑浏览器兼容问题，使用不方便
在实际工作中，一般使用JavaScript的框架（比如jquery）发动Ajax请求，从而解决这个问题。

4.1jQuery Ajax操作方法

在线文档：jQuery 参考手册 - Ajax (w3school.com.cn)

4.2$.ajax()方法

完整的参数查看手册：jQuery ajax - ajax() 方法

$.ajax 常用参数：

url：请求的地址
type：请求的方式get或者post，默认为 "GET"。
注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
data：发送到服务器的数据，将自动转换为请求字符串格式
success：请求成功后的回调函数
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。
error：默认值: 自动判断 (xml 或 html)，请求失败时的回调函数。
dataType：指定返回的数据类型，常用json或text

4.3$.get()和$.post()请求

jQuery AJAX get() 和 post() 方法

$.get()请求和$.post()请求常用参数：

url：请求的url地址
data：请求发送到服务器的数据
success：成功时的回调函数
type：返回内容的格式，xml，html，script，json，text

说明：$.get()和 $.post()底层还是使用$.ajax()方法来实现异步请求

4.3.1$.get()

get() 方法通过远程 HTTP GET 请求载入信息

这是一个简单的 GET 请求功能以取代复杂 $.ajax，请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax().

语法：

$(selector).get(url,data,success(response,status,xhr),dataType)

4.3.2$.post()

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

4.4$.getJSON()方法

jQuery ajax - getJSON() 方法

$.getJSON()常用参数

url：请求发送哪个url
data：请求发送到服务器的数据
success：请求成功时运行的函数

说明：$.getJSON()底层使用$.ajax()方法来实现异步请求

$.getJSON()方法通过 HTTP GET 请求载入 JSON 数据，语法：

jQuery.getJSON(url,data,success(data,status,xhr))

4.5应用实例

4.5.1$.ajax()应用实例

演示jquery发送ajax的案例

在输入框输入用户名
点击验证用户名，服务端验证该用户是否已经占用了，如果是，则以json格式返回该用户信息
假定king为已使用的用户名
对页面进行局部刷新，显示返回的信息

思路分析：直接参考3.2的思路图即可

引入jquery库：

注意：如果有的资源是拷贝进来的，有时候运行目录out没有及时更新，这时可以点击Rebuild Project，如果不行就redeploy Tomcat

配置servlet：

<servlet>
    <servlet-name>CheckUserServlet2</servlet-name>
    <servlet-class>com.li.ajax.servlet.CheckUserServlet2</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>CheckUserServlet2</servlet-name>
    <url-pattern>/checkUserServlet2</url-pattern>
</servlet-mapping>

创建CheckUserServlet2：

package com.li.ajax.servlet;

import com.google.gson.Gson;
import com.li.ajax.entity.User;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class CheckUserServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收jquery发送的ajax数据
        String username=request.getParameter("username");//参数名取决于前端的参数名

        response.setContentType("text/json;charset=utf-8");//指定MIME类型为json

        Gson gson=new Gson();
        if ("king".equals(username)) {
            //后面可以接入数据库database
            User user=new User(100, "king", "123", "king@163.com");
            response.getWriter().print(gson.toJson(user));
        } else {
            //返回一个不存在的User-->测试
            User user=new User(-1, "", "", "");
            response.getWriter().print(gson.toJson(user));
        }
    }
}

login2.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btn1").click(function () {
                //发出ajax请求
                /**
                 * 1.指定参数时，需要在{}里面
                 * 2.指定参数时，需要指定参数名
                 * 3.dataType:"json" 代表要求服务器返回的数据是json，
                 *          如果服务器返回的不是json，就会解析出错
                 */
                $.ajax({
                    url: "/ajax/checkUserServlet2",
                    type: "post",
                    data: {//这里我们直接给一个json
                        username: $("#uname").val(),
                        date : new Date()//防止浏览器缓存
                    },
                    error:function () {//失败后的回调函数
                        console.log("失败")
                    },
                    success:function (data,status,xhr) {
                        console.log("成功");
                        console.log("data=",data);
                        console.log("status=",status);
                        console.log("xhr=",xhr);
                        //data是一个json对象，需要转成json字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if (""==data.username){//说明用户名可用
                            $("#myres").val("该用户名可用");
                        }else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    dataType:"json"
                })
            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.5.2$.get()应用实例

使用4.5的应用实例，将上面的html页面改写，其他不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btn1").click(function () {
                //演示$.get()使用
                // $.get()默认是get请求，不需要指定请求方式
                //不需要写参数名，但是参数的位置要正确对应，
                // 顺序是：url，data，success回调函数，返回的数据格式
                $.get(
                    "/ajax/checkUserServlet2",
                    {//这里我们直接给一个json
                        username: $("#uname").val(),
                        date: new Date()//防止浏览器缓存
                    },
                    function (data, status, xhr) {
                        console.log("$.get成功")
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是一个json对象，需要转成json字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if (""==data.username) {//说明用户名可用
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    "json"
                )
            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.5.3$.post()应用实例

使用4.5的应用实例，将上面的html页面改写，其他不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!-- 引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btn1").click(function () {
                //$.post 和 $.get的调用方式基本一样，只是这时是以post方式发送ajax请求
                $.post(
                    "/ajax/checkUserServlet2",
                    {//这里我们直接给一个json
                        username: $("#uname").val(),
                        date: new Date()//防止浏览器缓存
                    },
                    function (data, status, xhr) {
                        console.log("$.post成功")
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是一个json对象，需要转成json字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if (""==data.username) {//说明用户名可用
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    "json"
                )
            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.5.4$.getJSON()应用实例

使用4.5的应用实例，将上面的html页面改写，其他不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btn1").click(function () {
                //如果你通过jquery发出的ajax请求是get请求，并且返回的数据格式是json，
                // 可以直接使用getJSON()函数，很方便
                $.getJSON(
                    "/ajax/checkUserServlet2",
                    {//这里我们直接给一个json
                        username: $("#uname").val(),
                        date: new Date()//防止浏览器缓存
                    },
                    function (data, status, xhr) {//成功后的回调函数
                        console.log("$.getJSON成功")
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是一个json对象，需要转成json字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if (""==data.username) {//说明用户名可用
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    }
                )
            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.6练习

● 需求分析: 到数据库去验证用户名是否可用

点击验证用户名, 到数据库中验证用户名是否可用
创建数据库 ajaxdb , 创建表 user 表自己设计
使用 Jquery + ajax 方式，服务端验证该用户名是否已经占用了, 如果该用户已经占用，以 json 格式返回该用户信息
对页面进行局部刷新, 显示返回信息

提示: 根据day34-JSON&Ajax02-3.3练习的 ajax 请求+jdbc+mysql 到数据库验证案例完成

根据之前的day34-JSON&Ajax02-3.3练习，我们已经写了JDBCUtilsByDruid，BaseDAO，UserDAO，UserService，User等类，只需要在CheckUserServlet2中修改一下代码即可完成：

package com.li.ajax.servlet;

import com.google.gson.Gson;
import com.li.ajax.entity.User;
import com.li.ajax.service.UserService;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.sql.SQLException;

public class CheckUserServlet2 extends HttpServlet {
    private UserService userService=new UserService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/json;charset=utf-8");//指定MIME类型为json
        Gson gson=new Gson();
        //接收jquery发送的ajax数据
        String username=request.getParameter("username");//参数名取决于前端的参数名
        //到数据库中查找有无重名用户
        try {
            User userByName=userService.getUserByName(username);
            //如果有返回的就是一个User对象，如果没有，返回的就是null
            response.getWriter().print(gson.toJson(userByName));
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

前端html页面使用4.5.4的$.getJSON()方法发送ajax请求，在4.5.4代码的基础上修改返回数据的判断条件即可

《大数据和人工智能交流》头条号向广大初学者新增C 、Java 、Python 、Scala、javascript 等目前流行的计算机、大数据编程语言，希望大家以后关注本头条号更多的内容。

使用Jquery的Ajax实现用户注册时候的重名检测，如果注册的用户名为“lily”的时候则提示“该用户名已存在”，否则提示“该用户名可用”

1、前端页面

页面users.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

用户名：<input type="text" id="usersId" name="usersname"/>

</form>

2、在前端页面增加Ajax控制

function checkData(){

var usersIdObj=$("#usersId");

var usersName=usersIdObj.val();

s001Obj=$("#s001");

$.get("/ajaxServer/AjaxServlet", { get_usersName: usersName },

function(data){

if(data==1){

s001Obj.text("该用户名已存在");

}else{

s001Obj.text("该用户名可用");;

}

);

}

</script>

3、Java的Servlet服务端及其配置

【1】web服务端的Servlet的代码如下：

package com.test;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

PrintWriter out=response.getWriter();

String usersname=request.getParameter("get_usersName");

System.out.println(usersname);

if (!"lily".equals(usersname)){

out.println(0);

}else{

out.println(1);

}

【2】、web.xml配置如下：

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<servlet-name>AjaxServlet</servlet-name>

<servlet-class>com.test.AjaxServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>AjaxServlet</servlet-name>

<url-pattern>/AjaxServlet</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

《大数据和人工智能交流》的宗旨

1、将大数据和人工智能的专业数学：概率数理统计、线性代数、决策论、优化论、博弈论等数学模型变得通俗易懂。

2、将大数据和人工智能的专业涉及到的数据结构和算法：分类、聚类、回归算法、概率等算法变得通俗易懂。

3、最新的高科技动态：数据采集方面的智能传感器技术；医疗大数据智能决策分析；物联网智慧城市等等。

根据初学者需要会有C语言、Java语言、Python语言、Scala函数式等目前主流计算机语言。

根据读者的需要有和人工智能相关的计算机科学与技术、电子技术、芯片技术等基础学科通俗易懂的文章。

录

复现Ajax跨域问题
Ajax跨域介绍
Ajax跨域解决方案
一. 在服务端添加响应头Access-Control-Allow-Origin
二. 使用JSONP解决
小结

复现Ajax跨域问题

做两个简单的小项目复现Ajax跨域问题. 后端语言使用Java
首先是一个简单的订单系统, 通过访问/loadOrderList, 最终以json串形式返回订单集合. 该项目使用Tomcat发布在7070端口.

@RequestMapping("/loadOrderList")
@ResponseBody
public List<Order> loadOrderList(String uid){
 //模拟订单数据
 Order o1=new Order();
 o1.setId("111");
 o1.setTotal(333.33);
 o1.setDate("2019-4-29");
 Order o2=new Order();
 o2.setId("222");
 o2.setTotal(444.44);
 o2.setDate("2019-5-29");
 Order o3=new Order();
 o3.setId("333");
 o3.setTotal(555.55);
 o3.setDate("2019-6-29");
 List<Order> list=new ArrayList<>();
 list.add(o1);
 list.add(o2);
 list.add(o3);
 return list;
}

在另一个项目中做一个向订单系统发送一个ajax请求, 获取订单集合. 该项目使用Tomcat插件发布在9090端口.

//index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script type="text/javascript">
 function sendAjax() {
 $.post("http://localhost:7070/order/loadOrderList", "uid=1234", function (data) {
 alert(data);
 });
 }
 </script>
</head>
<body>
 <a href="javascript：sendAjax()">sendAjax</a>
</body>
</html>

点击sendAjax超链接向订单系统发送ajax请求.

通过开发者工具发现虽然服务器以状态码200响应回来, 但是控制台却报错了.

这就是Ajax跨域出错的一种表现, 下面分析原因.

Ajax跨域介绍

Ajax跨域问题是由浏览器的同源策略造成的, 首先要理解源这个概念.
我们可以通过协议+域名+端口确定一个源. 在上面的示例中, 你可以把一个项目理解为一个源. Ajax请求可以对源内的资源发起访问, 但是不同源之间进行Ajax就会有问题.
当向不同源的资源发起Ajax请求时, 浏览器会加上Origin字段来标识源

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Content-Length: 8
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Host: localhost:7070
Origin: http://localhost:9090 协议+域名+端口

服务器会根据Origin字段决定是否同意这次请求, 如果Origin指定的源不在许可范围内, 服务器会返回一个不带有Access-Control-Allow-Origin字段的响应. 浏览器解析时发现缺少了这个字段, 就会报错. 这种错误不能通过状态码识别, 因为状态码很有可能就是200(见上面的案例).

Ajax跨域解决方案

下面介绍最常用Ajax跨域解决方案.

一. 在服务端添加响应头Access-Control-Allow-Origin

既然我们已经知道了Ajax跨域失败是因为响应中缺少了响应头Access-Control-Allow-Origin, 那么就想办法加上去.
以Java项目为例, 在后端我们使用CORSFilter过滤器加上该响应头.
(假设是Maven项目), 首先在pom.xml中添加坐标

<dependency>
 <groupId>com.thetransactioncompany</groupId>
 <artifactId>cors-filter</artifactId>
 <version>2.5</version>
 <scope>runtime</scope>
</dependency>

然后在web.xml中对过滤器进行配置.

 <filter>
 <filter-name>CORS</filter-name>
 <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
 <init-param>
 <param-name>cors.allowOrigin</param-name><!--这个标签是关键, *代表所有源都能访问-->
 <param-value>*</param-value>
 </init-param>
 <init-param>
 <param-name>cors.supportedMethods</param-name>
 <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
 </init-param>
 <init-param>
 <param-name>cors.supportedHeaders</param-name>
 <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
 </init-param>
 <init-param>
 <param-name>cors.exposedHeaders</param-name>
 <param-value>Set-Cookie</param-value>
 </init-param>
 <init-param>
 <param-name>cors.supportsCredentials</param-name>
 <param-value>true</param-value>
 </init-param>
 </filter>
 <filter-mapping>
 <filter-name>CORS</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>

配置后重启订单项目, 再次发起Ajax请求可以看到成功返回数据, 响应头中包含了Access-Control-Allow-Origin, 值为发起Ajax请求的源.

二. 使用JSONP解决

上面直接通过过滤器添加响应头的方法可以说是对症下药, 那么还有没有什么偏方呢?
还真的有. 在jsp文件中经常通过通过<script>标签引入一段js代码, 这段代码通常来源于网络, 也就是不同源. 那么我们不妨通过<srcipt>标签完成Ajax请求, 这样便顺带解决了跨域问题.
下面还是沿用上面的案例进行演示.
我们对发送ajax的jsp进行修改

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script>
 function doCallBack(data){
 var str=JSON.stringify(data);
 alert(str);
 }
 </script>
</head>
<body>
 <script src="http://localhost:7070/order/loadOrderList3?uid=111&callBack=doCallBack"></script>
</body>
</html>

上面的代码中, 我们首先定义了doCallBack()函数, 它接收一个字符串参数, 并且会把接收到的字符串显示出来.
然后在<body>标签中编写<script>标签, 我们将通过<script>标签请求订单系统, 订单系统将会返回一段js代码, 这段js代码会调用doCallBack()方法.
为了能够拼接出doCallBack(字符串参数...)js代码, 我们在订单系统中作如下操作.

@RequestMapping("/loadOrderList3")
@ResponseBody
public String loadOrderList3(String uid, String callBack){
 //模拟订单数据
 Order o1=new Order();
 o1.setId("111");
 o1.setTotal(333.33);
 o1.setDate("2019-4-29");
 Order o2=new Order();
 o2.setId("222");
 o2.setTotal(444.44);
 o2.setDate("2019-5-29");
 Order o3=new Order();
 o3.setId("333");
 o3.setTotal(555.55);
 o3.setDate("2019-6-29");
 List<Order> list=new ArrayList<>();
 list.add(o1);
 list.add(o2);
 list.add(o3);
 //拼接js代码
 String result=callBack + "(" + JSON.toJSONString(list) + ")";
 return result;
}

这个想法是不是很妙? 明白这个原理之后, 我们可以使用jQuery方便进行JSONP操作, 在上面的代码中我们人为指定了一个名为doCallBack的函数, 而jQuery会随机用时间戳生成一个函数名, 原理和上面是一样的.
所以完成一开时点击超链接发送Ajax请求只需要如下几步.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script>
 function sendAjax(){
 $.getJSON("http://localhost:7070/order/loadOrderList3?callBack=?","uid=111",
 function (data) {
 var str=JSON.stringify(data);
 alert(str);
 });
 }
 </script>
</head>
<body>
 <a href="javascript：sendAjax()">sendAjax</a>
</body>
</html>

小结

上面两种解决办法在思路上有着本质的不同. 方案一抓住CORS跨域访问问题的本质, 在后端加上响应头解决跨域问题. 方案二JSONP利用的是<script>标签能够跨域获取js代码的特性, 绕过跨域问题.

在线咨询

上一篇：「设计模式(六) - Builder模式」
下一篇：如何利用微软Powershell实现Windows中

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JSON&amp;amp;Ajax介绍和实例

.JSON介绍

2.JSON快速入门

2.1JSON的定义格式

2.2格式规则

2.3入门案例

3.JSON对象和字符串对象转换

3.1应用实例

3.2注意事项和细节

4.JSON在Java中使用

4.1说明

4.2JSON在Java中的应用场景

4.3Java对象和JSON字符串互转

4.4List对象和JSON字符串互转

4.4.1TypeToken

4.4.2二说TypeToken

4.5Map对象和JSON字符串互转

1.Ajax基本介绍

1.1Ajax是什么

1.2Ajax经典应用场景

2.Ajax原理示意图

2.1传统的web应用数据通信方式

2.2Ajax数据通信方式

3.JavaScript原生Ajax请求

3.1Ajax文档

3.2应用实例

3.3练习

3.3.1创建数据库表格

3.3.2创建工具类JdbcUtilsByDruid

3.3.3BaseDAO

3.3.4User类

3.3.5UserDAO

3.3.6UserService

3.3.7CheckUserServlet

3.3.8login.html

3.3.9测试

4.jQuery的Ajax请求

4.1jQuery Ajax操作方法

4.2$.ajax()方法

4.3$.get()和$.post()请求

4.3.1$.get()

4.3.2$.post()

4.4$.getJSON()方法

4.5应用实例

4.5.1$.ajax()应用实例

4.5.2$.get()应用实例

4.5.3$.post()应用实例

4.5.4$.getJSON()应用实例

4.6练习

复现Ajax跨域问题

Ajax跨域介绍

Ajax跨域解决方案

您的项目需求

JSON&Ajax介绍和实例