Ajax技术原理

通过 AJAX ， JavaScript ⽆需等待服务器的响应，⽽是：在等待服务器响应时执⾏其他脚本,在不影响主线情况下，执行支线任务，用户并不知道执行了支线任务，这就是异步过程。比如在百度搜索时，会有提示，这个功能不是加载当前页面展示出来，而是在百度框输入信息后在用户不知情下向后台发送请求，把相应的热点数据返回展示到列表中，这个过程不影响用户的主线任务(就是搜索框输入信息，不需要等待服务器响应)

ajax能实现异步操作，核心对象就是XMLHttpRequest，它主要用来和服务器进⾏异步通信。(之前和服务器交互使用表单/超链接等)

Ajax的特点 :

在用户不需要重新加载整个⻚⾯的情况下进行局部内容的刷新，提高用户体验度，避免频繁刷新页面。

ajax在不影响用户主线任务情况下发送异步请求执行支线任务，进行页面的局部刷新。

来看看和传统⽅式的区别

客户端发送http请求，服务器接收请求，调取数据库，然后将html+css通过http传输逆序返回，

Ajax 的⼯作原理相当于在⽤户和服务器之间加了 — 个中间层 (AJAX 引擎 )，通过Ajax引擎来实现一些异步操作，客户端通过javascript和ajax发送异步请求，服务器处理请求后发送xml数据或者文本文档数据给ajax引擎，ajax引擎再进行数据渲染

再来看看它们各⾃的交互

浏览器的普通交互⽅式

浏览器通过http发送请求后需要等待服务器响应后才可以进行下一步动作，

浏览器的 Ajax 交互⽅式

在页面中可以通过js发送多个请求，且不需要等待服务器响应，各个请求间互不影响，实现异步请求

4.Ajax可以完成的功能

在创建 Web 站点时，在客户端执⾏屏幕更新为⽤户提供了很⼤的灵活性。下⾯是使⽤ Ajax 可以完成的功能：

自动填充数据:百度搜索框、省市级联

用户注册有效性验证使用ajax技术在不影响用户输入表单信息情况下，发送异步请求去和数据库信息匹配判断用户信息是否与数据库信息一致。

动态更新购物⻋的物品总数，⽆需⽤户单击Update并等待服务器重新发送整个⻚⾯。提升站点的性能，这是通过减少从服务器下载的数据量⽽实现的。例如，在Amazon 的购物⻋⻚⾯，当更新篮⼦中的⼀项物品的数量时，会重新载⼊整个⻚⾯，这必须下载32K 的数据。如果使⽤ Ajax 计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之⼀。

消除了每次⽤户输⼊时的⻚⾯刷新。例如，在Ajax 中，如果⽤户在分⻚列表上单击 Next ，则服务器数据只刷新列表⽽不是整个⻚⾯。

直接编辑表格数据，⽽不是要求⽤户导航到新的⻚⾯来编辑数据。对于 Ajax ，当⽤户单击 Edit 时，可以将静态表格刷新为内容可编辑的表格。⽤户单击Done 之后，就可以发出⼀个 Ajax 请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

5.XMLHttpRequest常⽤属性

5.1.onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的回调函数。下⾯的代码定义⼀个空的函数，可同时对 onreadystatechange 属性进⾏设置

xmlHttp.onreadystatechange = function() { //我们需要在这写⼀些代码}

5.2.readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时， onreadystatechange 函数就会被执⾏

readyState 属性可能的值：

5.3.responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中，我们将把时间⽂本框的值设置为等于 responseText ：

xmlHttp.onreadystatechange = function() { 
 if (xmlHttp.readyState == 4) { 
 document.myForm.time.value = xmlHttp.responseText; 
 }
}

5.4.其它属性如下

6.XMLHttpRequest⽅法

6.1. open() ⽅法

open() 规定请求的类型、 URL 以及是否异步处理请求

参数 1 ：设置请求类型（ GET 或 POST），

参数 2：⽂件在服务器上的位置，

参数 3 ：是否异步处理请求，是为 true ，否为 false 。

xmlHttp . open ( "GET" , "test.php" , true );

6.2. send() ⽅法

send() ⽅法将请求送往服务器。如果我们假设 HTML ⽂件和 PHP ⽂件位于相同的⽬录，那么代码是这样的：

xmlHttp .send ( null );

6.3.其它⽅法如下

7.Ajax实现步骤

1. 创建 XMLHttpRequest 对象。

2. 设置请求⽅式。

3. 调⽤回调函数。

4. 发送请求。

具体步骤：

7.1 创建XMLHttpRequest对象

创建XMLHttp对象的语法是：

var xmlHttp = new XMLHttpRequest ();

如果是 IE5 或者 IE6 浏览器，则使⽤ ActiveX 对象，创建⽅法是：

var xmlHttp = new ActiveXObject ( "Microsoft.XMLHTTP" );

⼀般我们⼿写 AJAX 的时候，⾸先要判断该浏览器是否⽀持 XMLHttpRequest 对象，如果⽀持则创建该对象，如果不⽀持则创建ActiveX 对象。 JS 代码如下：

//第⼀步：创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) { 
 //⾮IE 
 xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { 
 //IE 
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") }

7.2 设置请求⽅式

在 WEB 开发中，请求有两种形式，⼀个是 get ，⼀个是 post ，所以在这⾥需要设置⼀下具体使⽤哪个请求，XMLHttpRequest 对象的 open() ⽅法就是来设置请求⽅式的。

//第⼆步：设置和服务器端交互的相应参数，向路径
http://localhost:8080/JsLearning3/getAjax准备发送数据 
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);

GET 还是 POST？

与 POST 相⽐， GET 更简单也更快，并且在⼤部分情况下都能⽤。然⽽，在以下情况中，请使⽤ POST 请求

⽆法使⽤缓存⽂件（更新服务器上的⽂件或数据库）

向服务器发送⼤量数据（ POST 没有数据量限制）

发送包含未知字符的⽤户输⼊时， POST ⽐ GET 更稳定也更可靠

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML （ Asynchronous JavaScript and XML ）。 XMLHttpRequest 对象如果要⽤于 AJAX 的话，其 open() ⽅法的 async 参数必须设置为 true ：对于 web 开发⼈员来说，发送异步请求是⼀个巨⼤的进步。很多在服务器执⾏的任务都相当费时。AJAX 出现之前，这可能会引起应⽤程序挂起或停⽌。

通过 AJAX ，JavaScript ⽆需等待服务器的响应，⽽是：在等待服务器响应时执⾏其他脚本，当响应就绪后对响应进⾏处理

7.3 调⽤回调函数

如果在上⼀步中 open ⽅法的第三个参数选择的是 true ，那么当前就是异步请求，这个时候需要写⼀个回调函数，XMLHttpRequest 对象有⼀个 onreadystatechange 属性，这个属性返回的是⼀个匿名的⽅法，所以回调函数就在这⾥写xmlHttp.onreadystatechange=function{},function{} 内部就是回调函数的内容。

所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。在这个例⼦⾥，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div 上。因为从后台返回的数据可能是错误的，所以在回调函数中⾸先要判断后台返回的信息是否正确，如果正确才可以继续执⾏。代码如下：

//第三步：注册回调函数
xmlHttp.onreadystatechange = function() { 
 if (xmlHttp.readyState == 4) { 
     if (xmlHttp.status == 200) { 
         var obj = document.getElementById(id); 
         obj.innerHTML = xmlHttp.responseText; 
     } else { 
         alert("AJAX服务器返回错误！"); 
     } 
 }
}

xmlHttp.readyState

是存有XMLHttpRequest 的状态。从 0 到 4 发⽣变化。0: 请求未初始化。1: 服务器连接已建⽴。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。所以这⾥我们判断只有当xmlHttp.readyState为4的时候才可以继续执⾏。

xmlHttp.status

是服务器返回的结果，其中200代表正确。404代表未找到⻚⾯，所以这⾥我们判断只有当xmlHttp.status等于200的时候才可以继续执⾏。

xmlHttp获取后台返回的数据

xmlHttp对象有两个属性都可以获取后台返回的数据，分别是：responseText和responseXML

responseText 是⽤来获得字符串形式的响应数据

responseXML 是⽤来获得 XML 形式的响应数据。

⾄于选择哪⼀个是取决于后台给返回的数据的

Ajax状态值与状态码区别

AJAX状态值是指，运⾏ AJAX 所经历过的⼏种状态，⽆论访问是否成功都将响应的步骤，可以理解成为AJAX运⾏步骤。如：正在发送，正在响应等，由 AJAX 对象与服务器交互时所得；使⽤ “ajax.readyState”获得。（由数字1~4 单位数字组成）

AJAX状态码是指，⽆论 AJAX 访问是否成功，由 HTTP 协议根据所提交的信息，服务器所返回的 HTTP 头信息代码，该信息使⽤“ajax.status” 所获得；（由数字 1XX,2XX 三位数字组成，详细查看 RFC ）这就是我们在使⽤AJAX 时为什么采⽤下⾯的⽅式判断所获得的信息是否正确的原因。

if(ajax.readyState == 4 && ajax.status == 200) {。。。。);}

AJAX运⾏步骤对应的状态值说明

ajax每一个执行步骤都对应着一个状态值，表示当前运行状态。

在AJAX实际运⾏当中，对于访问XMLHttpRequest（XHR）时并不是⼀次完成的，⽽是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是

0 - (请求未初始化) 还没有调⽤ send() ⽅法

1 - (服务器连接已建⽴，正在发送请求)已调⽤ send() ⽅法，正在发送请求

2 - (请求已接收)send() ⽅法执⾏完成，

3 - (交互,请求处理) 正在解析响应内容

4 - (请求已完成响应已就绪)响应内容解析完成，可以在客户端调⽤了

对于上⾯的状态，其中 “0” 状态是在定义后⾃动具有的状态值，⽽对于成功访问的状态（得到信息）我们⼤多数采⽤“4” 进⾏判断。

AJAX状态码说明

1 ：请求收到，继续处理

2 ：操作成功收到，分析、接受

3 ：完成此请求必须进⼀步处理

4 ：请求包含⼀个错误语法或不能完成

5 ：服务器执⾏⼀个完全有效请求失败

再具体就如下：

100—— 客户必须继续发出请求

101—— 客户要求服务器根据请求转换 HTTP 协议版本

200—— 交易成功

201—— 提示知道新⽂件的 URL

202—— 接受和处理、但处理未完成

203—— 返回信息不确定或不完整

204—— 请求收到，但返回信息为空

205—— 服务器完成了请求，⽤户代理必须复位当前已经浏览过的⽂件

206—— 服务器已经完成了部分⽤户的 GET 请求

300—— 请求的资源可在多处得到

301—— 删除请求数据

302—— 在其他地址发现了请求数据

303—— 建议客户访问其他 URL 或访问⽅式

304—— 客户端已经执⾏了 GET ，但⽂件未变化

305—— 请求的资源必须从服务器指定的地址得到

306—— 前⼀版本 HTTP 中使⽤的代码，现⾏版本中不再使⽤

307—— 申明请求的资源临时性删除

400—— 错误请求，如语法错误

401—— 请求授权失败

402—— 保留有效 ChargeTo 头响应

403—— 请求不允许

404—— 没有发现⽂件、查询或 URl

405—— ⽤户在 Request-Line 字段定义的⽅法不允许

406—— 根据⽤户发送的 Accept 拖，请求资源不可访问

407—— 类似 401 ，⽤户必须⾸先在代理服务器上得到授权

408—— 客户端没有在⽤户指定的饿时间内完成请求

409—— 对当前资源状态，请求不能完成

410—— 服务器上不再有此资源且⽆进⼀步的参考地址 411—— 服务器拒绝⽤户定义的 Content-Length 属性请求

412—— ⼀个或多个请求头字段在当前请求中错误

413—— 请求的资源⼤于服务器允许的⼤⼩

414—— 请求的资源 URL ⻓于服务器允许的⻓度

415—— 请求资源不⽀持请求项⽬格式

416—— 请求中包含 Range 请求头字段，在当前请求资源范围内没有 range 指示值，请求也不包含 If-Range请求头字段

417—— 服务器不满⾜请求 Expect 头字段指定的期望值，如果是代理服务器，可能是下⼀级服务器不能满⾜请求

500—— 服务器产⽣内部错误

501—— 服务器不⽀持请求的函数

502—— 服务器暂时不可⽤，有时是为了防⽌发⽣系统过载

503—— 服务器过载或暂停维修

504—— 关⼝过载，服务器使⽤另⼀个关⼝或服务来响应⽤户，等待时间设定值较⻓

505—— 服务器不⽀持或拒绝⽀请求头中指定的 HTTP 版本

7.4 发送请求

下面是post请求方式的ajax写法

//第四步：设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" +
Math.random(); 
// 增加time随机参数，防⽌读取缓存 
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8"); 
// 向请求添加 HTTP 头，POST如果有数据⼀定加加！！！！
xmlHttp.send(params);

如果需要像 HTML 表单那样 POST 数据，请使⽤ setRequestHeader() 来添加 HTTP 头。然后在 send()⽅法中规定您希望发送的数据。

7.5.Ajax案例-用户注册有效性验证

在用户注册的时候，鼠标触发离焦事件后，在脚本js中进行正则校验注册的信息是否符合要求，及时在表单中提示用户，但是要验证注册的用户名是否已存在需要提交表单去服务器验证若已存在需要重新加载整个登录页面，这个时候就可以使用ajax进行异步请求，在用户输入用户名触发鼠标离焦事件后ajax发送异步请求去验证数据库中该用户名是否已存在，并将信息反馈到页面，用户不需要去点击链接或按钮发送这个请求，ajax在不影响用户主线任务情况下执行支线任务，进行页面的局部刷新。

前台index.jsp中触发离焦事件，请求url是/testuname?username=uname映射到后台的servlet中

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script>
        /*ajax进行异步请求步骤*/
        function test(){
          //1.创建XMLHttpRequest
          var xmlhttp;//声明
          if (window.XMLHttpRequest){
            //非IE
            xmlhttp=new XMLHttpRequest();
          }else if (window.ActiveXObject){
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          //2.设置请求的方式、url和是否异步
          var uname=document.getElementById("uname").value;
          xmlhttp.open("get","/testuname?username="+uname,true);
          //3.指定回调函数
          xmlhttp.onreadystatechange=function () {
            //3.1.判断ajax状态值4表示请求已完成，响应已就绪
            if (xmlhttp.readyState==4){
              //3.2.接收服务器返回的数据,插入到页面
              var responseText = xmlhttp.responseText;
              document.getElementById("tip").innerText=responseText;
            }
          }
          //4.发送数据(请求)
          xmlhttp.send();
        }
    </script>
  </head>
  <body>
    <h1>Ajax发送异步请求，进行用户注册有效性验证</h1>
    username:<input type="text" id="uname" onblur="test()"><span id="tip"></span>
  </body>
</html>

后台处理

package servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/testuname")
public class TestUnameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收参数
        String username = req.getParameter("username");
        //设置resp的文本类型和编码格式
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();//获取输出流
        //向页面输入数据，ajax在回调函数中通过XMLHttpRequest的responseText接收这个数据
        if ("admin".equals(username)){
            writer.println("账户已被注册");
        }else{
            writer.println("用户可用");
        }
    }
}

post方式的ajax

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script>
        /*ajax进行异步请求步骤*/
        function test(){
          //1.创建XMLHttpRequest
          var xmlhttp;//声明
          if (window.XMLHttpRequest){
            //非IE
            xmlhttp=new XMLHttpRequest();
          }else if (window.ActiveXObject){
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          //2.设置请求的方式、url和是否异步
          var uname=document.getElementById("uname").value;
          xmlhttp.open("post","/testuname",true);//post方式，url不携带参数
          //3.指定回调函数
          xmlhttp.onreadystatechange=function () {
            //3.1.判断ajax状态值4表示请求已完成，响应已就绪
            if (xmlhttp.readyState==4){
              //3.2.接收服务器返回的数据,插入到页面
              var responseText = xmlhttp.responseText;
              document.getElementById("tip").innerText=responseText;
            }
          }
          //4.发送数据(请求)
          //post请求的ajax发送数据写法
          //使⽤ setRequestHeader() 来添加HTTP 头。然后在send()⽅法中规定您希望发送的数据。
          xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
          xmlhttp.send("username="+uname);
        }
    </script>
  </head>
  <body>
    <h1>Ajax发送异步请求，进行用户注册有效性验证</h1>
    username:<input type="text" id="uname" onblur="test()"><span id="tip"></span>
  </body>
</html>

8.jquery的ajax操作

8.1.传统⽅式实现Ajax的不⾜

步骤繁琐,⽅法、属性、常⽤值较多不好记忆

8.2.ajax()⽅法

可以通过发送 HTTP请求加载远程数据，是 jQuery 最底层的 Ajax 实现，具有较⾼灵活性。

$.ajax( [settings] ); // 参数 settings 是 $.ajax ( ) ⽅法的参数列表，⽤于配置 Ajax 请求的键值对集合 ;

url: 请求的路径

data: 发送的数据

success: 成功函数

datatype 返回的数据

Jquery_ajax.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script>
      /*入口函数*/
        $(function(){
          /*绑定离焦事件*/
          $("#uname").blur(function () {
              //1.获取input中输入的值
              var uname = $(this).val();
              //2.发送请求
              $.ajax({
                url:"/testuname",/*请求路径*/
                data:"username="+uname,/*请求携带的参数*/
                type:"post",/*请求方式*/
                dataType:"text",/*服务器响应的数据类型*/
                success:function (rs) {/*回调函数，接收服务器回写的数据*/
                  $("#tip").html(rs);
                }
              });
          });
        })
    </script>
  </head>
  <body>
    <h1>Ajax发送异步请求，进行用户注册有效性验证</h1>
    username:<input type="text" id="uname"><span id="tip"></span>
  </body>
</html>

package servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/testuname")
public class TestUnameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收参数
        String username = req.getParameter("username");
        //设置resp的文本类型和编码格式
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();//获取输出流
        //向页面输入数据，ajax在回调函数中通过XMLHttpRequest的responseText接收这个数据
        if ("admin".equals(username)){
            writer.println("账户已被注册");
        }else{
            writer.println("用户可用");
        }
    }
}

8.3.get() ⽅法通过远程 HTTP GET 请求载⼊信息

这是⼀个简单的 GET 请求功能以取代复杂 $.ajax

$.get(url,data,function(result) {
 //省略将服务器返回的数据显示到⻚⾯的代码
});

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script>
      /*入口函数*/
        $(function(){
          /*绑定离焦事件*/
          $("#uname").blur(function () {
              //1.获取input中输入的值
              var uname = $(this).val();
              //2.$.get(请求路径，请求参数，回调函数)发送请求
              $.get("/testuname","username="+uname,function (rs) {
                $("#tip").html(rs);
              });
          });
        })
    </script>
  </head>
  <body>
    <h1>Ajax发送异步请求，进行用户注册有效性验证</h1>
    username:<input type="text" id="uname"><span id="tip"></span>
  </body>
</html>

8.4.post() ⽅法通过远程 HTTP Post 请求载⼊信息

$.post(url,data,function(result) {
 //省略将服务器返回的数据显示到⻚⾯的代码
})

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>$Title$</title>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script>
    /*入口函数*/
    $(function(){
      /*绑定离焦事件*/
      $("#uname").blur(function () {
        //1.获取input中输入的值
        var uname = $(this).val();
        //2.$.post(请求路径，请求参数，回调函数)发送请求
        $.post("/testuname","username="+uname,function (rs) {
          $("#tip").html(rs);
        });
      });
    })
  </script>
</head>
<body>
<h1>Ajax发送异步请求，进行用户注册有效性验证</h1>
username:<input type="text" id="uname"><span id="tip"></span>
</body>
</html>

9.JSON

9.1.什么是JSON

JSON (JavaScript Object Notation) 是⼀种轻量级的数据交换格式。易于⼈阅读和编写。同时也易于机器解析和⽣成

9.2.JSON对象定义和基本使⽤

在标准的json格式中，json对象由在括号括起来，对象中的属性也就是json的key是⼀个字符串，所以⼀定要使⽤双引号引起来。每组key之间使⽤逗号进⾏分隔。

JSON的定义

var 变量名 = {
“key” : value , // Number类型
“key2” : “value” , // 字符串类型
“key3” : [] , // 数组类型
“key4” : {}, // json 对象类型
“key5” : [{},{}] // json 数组
};

JSON对象的访问

json 对象，顾名思义，就知道它是⼀个对象。⾥⾯的 key 就是对象的属性。我们要访问⼀个对象的属性，只需要使⽤【对象名. 属性名】的⽅式访问即可。

json在页面的定义

访问json的属性

访问json的数组属性

访问json的json属性

访问json的json数组

<script type="text/javascript">
 // json的定义 
 var jsons = {
     "key1":"abc", // 字符串类型
     "key2":1234, // Number
     "key3":[1234,"21341","53"], // 数组
     "key4":{ // json类型
         "key4_1" : 12,
         "key4_2" : "kkk"
     },
     "key5":[{ // json数组
         "key5_1_1" : 12,
         "key5_1_2" : "abc"
        },{
         "key5_2_1" : 41,
         "key5_2_2" : "bbj"
     }]
 };
 // 访问json的属性
 alert(jsons.key1); // "abc"
 // 访问json的数组属性
 alert(jsons.key3[1]); // "21341"
 // 访问json的json属性
 alert(jsons.key4.key4_1);//12
 // 访问json的json数组
 alert(jsons.key5[0].key5_1_2);//"abc"
 </script>


<script>
        //1.定义json---单个对象
        var j1={"name":"张三","age":18};
        alert(j1.name+","+j1.age);
        //2.数组
        var j2={"name":["张三","李四"]};
        alert(j2.name[1]);
        //3.
        var j3={"users":[{"name":"张三","age":18},{"name":"李四","age":19}]};
        alert(j3.users[0].age);
</script>

9.3.JSON在java中的使⽤(重要)

我们要使⽤json和java中使⽤，我们需要使⽤到⼀个第三⽅的包。它就是

java对象和json之间的转换

单个对象与json互转

java->json：

Users user2=new Users();
user2.setUsername("李四");
user2.setPassword("abc");
user2.setAge(20);
JSONObject obj=JSONObject.fromObject(user);//obj就是json格式的

json->java ：

String str="{'username':'李四','password':'admin','age':19}";
JSONObject json=JSONObject.fromObject(str);
Users user=(Users)JSONObject.toBean(json,Users.class);

对象集合和json的转换

java集合->json数组:

List list=new ArrayList();
list.add("dd");
list.add("aa");
JSONArray obj=JSONArray.fromObject(list);//set也是这么转

json 数组 ->java 集合

⽅式 1:

String str2="[{'age':20,'password':'abc','username':'李四'},
              {'age':10,'password':'adb','username':'张三'}
]";
JSONArray json2=JSONArray.fromObject(str2);
Object[] obj=(Object[])JSONArray.toArray(json2,Users.class);

⽅式 2:

String str3="[{'age':20,'password':'abc','username':'李四'},
                {'age':10,'password':'adb','username':'展示⼲'}
]";
JSONArray json3=JSONArray.fromObject(str3);
//默认转换成ArrayList
List<Users> list=(List<Users>) JSONArray.toCollection(json3,Users.class);

ajax实例2-实现数据的⾃动填充：

当输入uid后触发离焦事件，ajax发送异步请求去数据库通过id找到对应的信息回写到页面input中，实现自动填充

ajax_demo.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax实现自动填充功能</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        /*JQery入口函数*/
        $(function () {
            $("#uid").blur(function () {
                //1.获得uid的值
                var uid = $(this).val();
                //2.ajax发送异步请求
                $.post("/getUserByUid","uid="+uid,function (rs) {
                    //转换成可以处理的js,将rs进行转义
                    rs=eval("("+rs+")");
                    //此时的rs是json格式的对象
                    $("#uname").val(rs.username);
                    $("#pass").val(rs.password);
                    $("#money").val(rs.money);
                });
            });
        })

    </script>
</head>
<body>
    <h5>当输入uid后触发离焦事件，ajax发送异步请求去数据库通过id找到对应的信息回写到页面input中，实现自动填充</h5>
    uid:<input type="text" id="uid"><br>
    name:<input type="text" id="uname"><br>
    pass:<input type="text" id="pass"><br>
    money:<input type="text" id="money"><br>
</body>
</html>

Users

package bean;

public class Users {
    private Integer uid;
    private String username;
    private String password;
    private Double money;

    public Users(Integer uid, String username, String password, Double money) {
        this.uid = uid;
        this.username = username;
        this.password = password;
        this.money = money;
    }
    public Users() { }
    public Integer getUid() { return uid; }
    public void setUid(Integer uid) {  this.uid = uid; }
    public String getUsername() {  return username; }
    public void setUsername(String username) { this.username = username;   }
    public String getPassword() {  return password;  }
    public void setPassword(String password) { this.password = password; }
    public Double getMoney() { return money;  }
    public void setMoney(Double money) {this.money = money; }

    @Override
    public String toString() {
        return "Users{" +
                "uid=" + uid +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", money=" + money +
                '}';
    }
}

GetUserById

package servlet;

import bean.Users;
import net.sf.json.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/getUserByUid")
public class GetUserByUid extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收参数
        String uid = req.getParameter("uid");
        System.out.println("uid："+uid);
        int userid = Integer.parseInt(uid);
        System.out.println("int uid:"+uid);
        Users users=null;
        switch (userid){
            case 1:
                users=new Users(1,"张三","123",123.2);
                break;
            case 2:
                users=new Users(2,"张三2","123",123.2);
                break;
            case 3:
                users=new Users(3,"张三3","123",123.2);
                break;
            default:
                users=new Users();
        }
        //java->json
        JSONObject jsonObject = JSONObject.fromObject(users);//json
        System.out.println(jsonObject);
        //设置resp的文本类型和编码格式，获取输出流
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.print(jsonObject);//页面ajax回调函数可以接收到这个json
    }
}

你好啊cbw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax技术原理

1.Ajax简介AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法。AJAX 是与服务器交换数据并更新部分⽹⻚的艺术，在不重新加载整个⻚⾯的情况下。2.Ajax所包含的技术AJAX 是⼏种原有技术的结合体。它由下列技术组合⽽成。1.使⽤CSS和XHTML来表示。 2.使⽤DOM模型来交互和动态显示。 3.使⽤XMLHttpRequest来..
复制链接

扫一扫