AJAX 入门-EW帮帮网

01-AJAX 简介

1.1 什么是 AJAX ？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一个标准。

AJAX 在不重新加载整个页面的情况下, 和服务器进行数据交互, 进行局部刷新, 也称为局部刷新技术。

1.2 同步和异步

同步: 发送请求, 必须等待响应, 在响应没有返回之前, 客户端什么事情都没法干 ,只能等待响应的返回。

异步: 发送请求, 不必等待响应, 客户端该干嘛干嘛, 当响应返回的时候, 通知客户端来处理响应。

举例：

同步：对讲机: 通话之前要先对号, 接通之后才能通话。

异步：QQ/微信发送信息: 发送完信息, 去看视频; 不需要等待回复, 当对方回复的时候, 会通知来处理响应。

同步: 去照相馆照相, 照完相等清洗照片, 每个2分钟问一下照片洗出来了吗, 直到照片洗出来才去理发。

异步: 去照相馆照相, 照完相等清洗照片; 告诉老板洗出来给我打电话,我过来取; 然后去理发了。

同步请求是刷新整个页面的技术. 响应的时候会返回整个页面的 html 代码.。

异步请求是局部刷新技术, 不会返回整个页面数据, 只会返回页面中的小部分数据。

1.3 AJAX 用于什么场景?

适合于处理响应速度要求特别高的, 或者提高用户体验的功能。

地图类: 导航, 使用同步延时特别高; 使用异步。

秒杀系统: 实时展示商品数量, 还有多久...

提高用户体验表单使用最多: 比如, 用户名唯一性验证。

手机端软件: 都是异步；后端项目: 后台都是异步。

02-AJAX 基础

2.1 创建异步对象

XMLHttpRequest 对象: 用来发送异步请求以及获取响应数据, 它是构造函数

var ajax = new XMLHttpRequest();



console.log(ajax);



// 兼容性处理, 在早期浏览器(IE5, IE6,  IE7) , 有兼容问题

// IE5, IE6 内核的浏览器, 使用  ActiveXObject 对象来处理异步请求

if(XMLHttpRequest) { // 若浏览器支持此对象, 使用这个对象来创建

   ajax = new XMLHttpRequest();

} else { // IE5, IE6 兼容处理

   ajax = new  ActiveXObject("Microsoft.HTTP");

}

console.log(ajax);

2.2 发送请求

1）方法介绍

方法	描述
open(method,url,async)	配置请求, 规定请求方式、请求地址以及是否异步处理请求。 method：请求方式；GET 或 POST url：请求地址 async：true（异步）或 false（同步）, 默认异步
send(string)	将请求发送到服务器。 string：仅用于 POST 请求, 用于传递参数

2）开发步骤

[1] 创建 XMLHttpRequest 对象。

[2] 调用 open 方法配置请求。

[3] 调用 send 方法发送请求。

<button onclick="sendGet()">请求发送</button>

<script type="text/javascript">

       function sendGet(){

             var ajax=new XMLHttpRequest();

             ajax.open("get", "/07-ajax/ajaxTest?name=wuxiaojun&sex=男&age=20");

             ajax.send();

       }

</script>

2.3 接收响应

1）属性介绍

属性	描述
onreadystatechange	响应事件, 监听服务器端响应状态的改变，每当 readyState (响应状态) 属性改变时，就会调用该函数。
readyState	响应状态存有响应状态的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪; 说明服务器端开始返回响应; 前0-3这4状态并不是所有的浏览器都有, 但是每个浏览器都有第5个状态
status	响应状态码 200: "OK" 404: 未找到页面 500: 服务器错误

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

2）接收响应步骤

老板(浏览器) 接待客人(王总), 老板不会在一直在门口等待, 一般找个小弟看着, 当王总来的时候通知老板出来迎接客人。

[1] 添加 onreadystatechange 事件( 小弟 ), 监听服务端状态的改变 ----> 找个小弟在门口盯着。

[2] 当 readyState == 4 的时候, 说明响应就绪, 服务器开始发送响应 -----> 来了一个人, 小弟询问是否是王总。

[3] 当 status == 200 的时候, 说明响应成功 -----> 来了一个人, 小弟询问确定是王总。

[4] 通过 responseText 接收响应数据 -----> 通知老板出来接待客人。

[5] 通过 DOM 操作完成局部刷新。

<button onclick="getResponse()">接收响应</button>

    <h3>1</h3>

    <h3>2</h3>

    <h3>3</h3>

    <h3>4</h3>

    <h3>5</h3>

    

    <h2></h2>

    <h3>6</h3>

    <h3>7</h3>

    <h3>8</h3>

    <h3>9</h3>

    <script type="text/javascript"  src="js/jquery-1.12.3.min.js"></script>

    <script type="text/javascript">

        function getResponse() {

            // 1. 发送请求

            var ajax = new XMLHttpRequest();

            // 2. 配置请求

            ajax.open("get",  "/04-ajax/response");

            // 3. 发送请求

            ajax.send();

            // 4. 接收响应

            // [1] 通过 onreadystatechange 事件,  监听服务器端响应状态的变化

            ajax.onreadystatechange = function()  {

                // [2] 当 readyState == 4 , 说明响应就绪, 服务器端开始返回响应数据

                if(ajax.readyState == 4) {

                    // [3] 当 status == 200 , 说明响应成功

                    if(ajax.status == 200) {

                        // [4] 接收响应数据

                        var data =  ajax.responseText;

                        // [5] 通过 DOM 操作完成局部刷新

                        $("h2").html(data);

                    }

                }

            }



        }

    </script>

2.4 AJAX 工作原理

AJAX 的核心是 XMLHttpRequest 对象（XHR），它可以在后台与服务器进行通信。

原理流程：

1） JavaScript 创建 XMLHttpRequest

2）调用 open() 方法配置请求（URL、请求方式等）。

3）调用 send() 发送请求。

4）服务器处理并返回数据（JSON、XML、文本等）。

5） JavaScript 接收数据，更新页面部分内容。

2.5 同步请求和异步请求的区别？

1）发送方式不同：

同步请求: 地址栏输入, 超链接, form 表单, location.href

异步请求: 通过 XMLHttpRequest 对象发送请求

2）响应方式不同：

同步请求: 请求转发, 重定向; 返回都是整个页面数据

异步请求: 通过 response 输出流将响应返回, 返回部分数据.

3）发送请求的时机不同：

异步请求: 先进入 jsp 页面, 然后通过事件来触发异步请求的发送

比如: 点击的时候发送, 失去焦点的时候发送, 表单提交的时候发送, 文档就绪的时候发送

03-异步请求

3.1 发送异步请求

[1]创建 XMLHttpRequest 对象

var ajax=new XMLHttpRequest();

[2]配置请求

ajax.open("请求方式","请求地址");

建议请求地址使用绝对地址：/工程名称/servlet-url

[3]发送请求

ajax.send(data);//data:POST 方式是用, GET 方式不需要

3.2 发送带参数的异步请求

1）GET 方式

[1]创建 XMLHttpRequest 对象

var ajax=new XMLHttpRequest();

[2]配置请求

ajax.open("请求方式","请求地址?参数名称=参数值&参数名称=参数值&...");

建议请求地址使用绝对地址：/工程名称/servlet-url

[3]发送请求

ajax.send();

2）POST 方式

[1]创建 XMLHttpRequest 对象

var ajax=new XMLHttpRequest();

[2]配置请求

ajax.open("请求方式","请求地址");

建议请求地址使用绝对地址：/工程名称/servlet-url

[3]设置请求头

ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

[4]发送请求

ajax.send("参数名称=参数值&参数名称=参数值&...");

3.3 接收响应

1.接受响应，建立与发送完请求的基础上

2.通过 onreadystatechange 事件，监听响应状态的变化

ajax.onreadystatechange=function (){

   3.若 readyState=4，说明响应就绪(404,500类型响应)

   if(ajax.readyState==4){

       4.若 status==200, 说明响应成功

       if(ajax.status==200){

           5.通过 responseText 获取响应

           var txt=ajax.responseText;

           6.通过 DOM 操作完成局部刷新

       }

   }

}

3.4 完整代码

1）前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery.3.4.1.js"></script>

<script type="text/javascript">

//ajax 根据 id 获取用户

function getUser(){

//获取 id 值

var id = $("input[name='id']").val();

//ajax 发送请求  获取 id 对应的用户信息

//1.创建 ajax 核心对象（异步对象）---XMLHttpRequest

var ajax = new XMLHttpRequest();

//2.设置请求

ajax.open("get","GetUserServlet?id="+id,true);

//3.发送

ajax.send(null);

//4.响应处理

ajax.onreadystatechange=function(){

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

//接收结果数据    做出响应 -- 局部更新页面

//响应数据（1）responseText---json 格式字符串    (2)responseXML

var data = ajax.responseText;

console.log(data);

//下面的操作是错误的 data 接收的是 json 格式的字符串   不是 json 对象

//data.id   data.username    data.password   data.realname

//需要将 json 格式的字符串 ------> json 对象

var json = JSON.parse(data);

console.log(json);

var str = "ID:"+json.id+",用户名:"+json.username+",密码:"+json.password+",真实名称:"+json.realname;

//局部更新

$("#div1").html(str);

//json 对象 -----> json 格式字符串

var ss = JSON.stringify(json);

console.log(ss);

}

}

}

</script>

</head>

<body>

用户id:<input type="text" name="id"><input type="button" onclick="getUser()" value="取用户"><br>

<h2>用户信息:</h2>

<div id="div1">

</div>

</body>

</html>

2）后台servlet

package com.youzhong.servlet;

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;

import com.fasterxml.jackson.databind.ObjectMapper;

import com.youzhong.dao.UserDAO;

import com.youzhong.entity.User;

/**

* Servlet implementation class GetUserServlet

*/

public class GetUserServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

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

// 是一个处理 ajax 请求的 servlet

// 根据 id 查询用户

// 1. 抓取参数 id

        String id = request.getParameter("id");

// 2. dao 查询用户

        UserDAO dao = new UserDAO();

        User user = dao.findById(Integer.parseInt(id));

// 3. 使用 out 流  写回 user 数据

        response.setCharacterEncoding("utf-8");

        PrintWriter out = response.getWriter();

// 把 user 对象 ---> json 格式字符串    使用 jackson

        ObjectMapper om = new ObjectMapper();

        String json = om.writeValueAsString(user);

out.println(json);

out.flush();

out.close();

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

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

        // TODO Auto-generated method stub

        doGet(request, response);

}

}

04-JSON 数据

4.1 什么是 JSON ?

JSON（JavaScript Object Notation）一种简单的数据格式，比 xml 更轻巧。JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

4.2 JSON 数据格式

1）JSON 对象: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。属性名称使用引号包裹。

语法：

{

"属性名称": 值,

"属性名称": 值,

"属性名称": 值,

...

}

JSON 对象是 JS 对象中的一种; JSON 对象的属性使用引号包裹然后 JSON 对象中没有方法。

2）JSON 数组：JSON 数组就是 js 数组。

[对象,对象,对象,...,对象]

<script type="text/javascript">

       // 定义 json 对象, 用来存储数据

        var jsonObj = {

            "name": "王丽",

            "age": 23,

            "sex": "女"

        };

        console.log(jsonObj);

        // 使用属性: 对象.属性

        console.log(jsonObj.sex);



        // json 数组

        var jsonArr = [{

            "name":"王磊",

            "sex":"男"

        },{

            "name":"李娜",

            "sex":"女"

        }];



        console.log(jsonArr);

        // 遍历集合

        for (var i = 0; i < jsonArr.length; i++)  {

            console.log(jsonArr[i].name);

        }

</script>

4.3 json 字符串和 json数据的转换

json数据 = JSON.parse(json格式的字符串); // 将 json 格式的字符串转换为 json 数据(对象,数组)

json字符串 = JSON.stringify(json数据); // 将 json 数据转换为 json 格式的字符串

<table border="1">

       <tr>

             <td>药草名称</td>

             <td><input type="text" name="yname"></td>

       </tr>

       <tr>

             <td>药草类型</td>

             <td>

             <select>

                    <option>请选择</option>

             </select>

             </td>

       </tr>

       <tr>

             <td>药草产出时间</td>

             <td><input type="date" name="birthday"></td>

       </tr>

       <tr>

             <td  colspan="2"><input type="button" value="提交"></td>

       </tr>

</table>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<script type="text/javascript">

$("select").click(function (){

             var ajax=new XMLHttpRequest();

             ajax.open("get","/012-json/typeServlet");

             ajax.send();

             ajax.onreadystatechange=function (){

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

                           var txt=ajax.responseText;

                           var json=JSON.parse(txt);

                           for(var i=0;i<json.length;i++){

                                 $("select").append("<option>"+json[i].type_name+"</option>");

                           }



                    }

             }

})

</script>

05-JQuery 操作 AJAX

5.1 发送 get 请求

$.get(url,[data],[fn],[dataType]): url 是必填参数, 其他参数是可选参数(需要就添加, 不需要就去掉)

url: 请求地址

data: 可选参数, 请求参数

fn: 响应处理函数, 有一个参数用来接收响应数据

dataType: 数据类型, 默认是字符串; 规定返回响应数据的类型, 若是 json 数据, 需要设置 json , 可以自动进行数据转换

   <button>发送请求 - 无参</button>

    <button>发送请求 - 有参</button>

    <button>发送请求 - 接收响应</button>

    <button>发送请求 - 接收JSON数据响应</button>

    <script type="text/javascript"  src="js/jquery-1.12.3.min.js"></script>



    <script type="text/javascript">

        $("button:eq(0)").click(function() {

            // 发送请求

            $.get("/04-ajax/ajaxTest");

        });



        $("button:eq(1)").click(function() {

            // 参数:

            // [1] 使用传参字符串: 参数名称=参数值&参数名称=参数值&...

            //  $.get("/04-ajax/ajaxTest","name=zhangli&age=23&sex=man");

            // [2] 使用 js 对象传参

            // {参数名称: 参数值,参数名称: 参数值,...,参数名称: 参数值}

            var data = {

                name: "lili",

                age: 23,

                sex: "woman"

            };

            $.get("/04-ajax/ajaxTest", data);

        });



        $("button:eq(2)").click(function() {

            // 接收响应

            $.get("/04-ajax/response",  function(response) {// response : 响应数据

                console.log(response);

            });

        });



        $("button:eq(3)").click(function() {

            // 接收 json 数据

            $.get("/04-ajax/json",function(response) {

                console.log(response);

                console.log(typeof response);

            },"json");

        });



    </script>

5.2 发送 post 请求

$.post(url,[data],[fn],[dataType]): url 是必须参数, 其他参数是可选参数(需要就添加, 不需要就去掉)

url: 请求地址

data: 可选参数, 请求参数

fn: 响应处理函数, 有一个参数用来接收响应数据

dataType: 数据类型, 默认是字符串; 规定返回响应数据的类型, 若是 json 数据, 需要设置 json , 可以自动进行数据转换

5.3 get 和 post 的选择

1）当我们传递参数有中文或者提交整个表单（尤其是表单有上传），就选择 post

2）其它的，选择 get 可以。（get 请求方式执行速度 > post 请求方式）

5.4 综合性的方法

$.ajax(url, [settings]); 发送任何类型的异步请求

url: 必填参数, 请求的 url

settings: 配置对象, 可选参数

{

method: "", // 请求方式, 默认是 GET 方式

data: "", // 请求参数, 可以是传参字符串或者 js 对象

success: function(response) { // 响应成功的处理函数

error: function(err) { // 响应失败的处理函数

dataType: "" , // 将响应数据转换为何种类型, 默认字符串, 可以设置为 json 将响应数据转换为 json 数据

}

   <button>发送请求 - 无参</button>

    <button>发送请求 - 有参</button>

    <button>发送请求 - 接收响应</button>

    <button>发送请求 - 接收JSON数据响应</button>

    <script type="text/javascript"  src="js/jquery-1.12.3.min.js"></script>



    <script type="text/javascript">

        $("button:eq(0)").click(function() {

            // 发送请求

            $.ajax("/04-ajax/ajaxTest", {

                method: "post"

            });

        });



        $("button:eq(1)").click(function() {

            // 发送带参数的请求

            var formData = {

                name: "李四",

                age: 23,

                sex: "男"

            };

            $.ajax("/04-ajax/ajaxTest",{

                method: "post",

                data: formData

            });

        });



        $("button:eq(2)").click(function() {

            // 接收响应

            $.ajax("/04-ajax/response", {

                success: function(response) { //  响应成功的处理函数

                    alert(response);

                },

                error: function(err) { // 响应失败的处理函数, 服务器报错

                    console.log(err); // err: 错误信息对象

                    // 获取错误信息

                    $("body").append(err.responseText);

                }

            })

        });



        $("button:eq(3)").click(function() {

            // 接收 json 数据

            $.ajax("/04-ajax/json", {

                success: function (response) {

                    console.log(response);

                    console.log(typeof  response);

                },

                dataType: "json" // 将响应数据转换为 json

            })

        });

    </script>

AJAX 入门

01-AJAX 简介

1.1 什么是 AJAX ？

1.2 同步和异步

1.3 AJAX 用于什么场景?

02-AJAX 基础

2.1 创建异步对象

2.2 发送请求

2.3 接收响应

2.4 AJAX 工作原理

2.5 同步请求和异步请求的区别？

03-异步请求

3.1 发送异步请求

3.2 发送带参数的异步请求

3.3 接收响应

3.4 完整代码

04-JSON 数据

4.1 什么是 JSON ?

4.2 JSON 数据格式

4.3 json 字符串和 json数据的转换

05-JQuery 操作 AJAX

5.1 发送 get 请求

5.2 发送 post 请求

5.3 get 和 post 的选择

5.4 综合性的方法

网站公告

今日签到

热门文章

最新发布