AJAX

AJAX的简介

同步与异步

【目标】

tex

1、了解浏览器给服务器发送请求的途径；
2、了解同步请求与异步请求的概念；

【讲解】

【1】浏览器给服务器发送请求的途径：

tex

1、在浏览器地址栏输入url，按回车键发送；
2、HTML页面中，通过超链接标签<a href="http://www.baidu.com">百度</a>；
3、在JavaScript中，通过location.href="http://www.baidu.com"发送请求；
4、通过form表单发送请求；

【2】同步请求与异步请求

tex

同步请求：串行操作，发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。

异步请求：并行操作，发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

【小结】

tex

1、浏览器给服务器发送请求的途径：
    通过浏览器地址栏发送；
    通过a标签发送
    通过form表单发送
    通过location对象的href属性发送
    【注意】以上请求都属于同步请求

2、同步请求与异步请求：
    同步请求：串行操作，发送一个请求，需等待响应，期间不能够再次发送请求；
    异步请求：并行操作，发送一个请求，无需等待响应，即可再发送请求；

AJAX的概念

【目标】

tex

了解AJAX的概念

【讲解】

【1】AJAX 的概念

tex

AJAX 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页页面。

【2】AJAX 中的 JavaScript

tex

指的是使用JavaScript技术来发送异步请求，并接受响应的数据；

【3】AJAX 中的 XML

tex

指的是AJAX请求和响应之间传输的数据格式为：XML。注：现在已经不再使用xml数据格式传输数据，使用JSON居多。

【小结】

tex

1、AJAX概念：
    AJAX是一项使用JavaScript发送异步请求的技术；
2、AJAX请求特点：
    【1】能够发送异步请求；
    【2】能够接收响应数据；
    【3】接收响应的过程中，不需要重载整个页面，可以局部更新页面内容；

AJAX的应用场景

【目标】

tex

1、了解AJAX的应用场景

【讲解】

【1】表单异步校验

很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。

1553843858325

【2】搜索框自动联想

不管是专注于搜索的百度，还是站点内商品搜索的京东，都有搜索功能，在搜索框输入查询关键字时，整个页面没有刷新，但会根据关键字显示相关查询字条，这个过程是异步的。

1553843656067

【小结】

tex

AJAX的应用场景：发送异步请求，将响应的结果局部更新到页面中；
【1】表单异步校验；
【2】搜索框自动联想；

原生AJAX

AJAX（Asynchronous Javascript And XML：异步 Javascript 和 XML）在 2005 年 2 月被提出。不过 AJAX 并不是一种新的语言或技术。实际上，它由几种已知的技术组合而成。Ajax 技术的核心是XMLHttpRequest。AJAX 就是通过 XMLHttpRequest 对象来发送异步的请求。

原生的AJAX及API

【目标】

tex

1、了解什么是原生的AJAX；
2、了解原生AJAX的API；

【讲解】

【1】原生 AJAX 的概念

tex

1、原生的AJAX指的是：没有使用任何的框架，使用原始的JS来实现ajax。
2、JS实现ajax依赖于ajax引擎对象：XMLHttpRequest

【2】原生 AJAX 的 API

方法名	作用	说明
new XMLHttpRequest()	创建AJAX引擎对象
onreadystatechange	AJAX引擎对象的监听事件	监听请求和响应的变化
readyState	获取请求状态值	请求状态：0,1,2,3,4
status	获取响应状态值	响应状态码：200,500...
responseText	获取响应的文本数据	服务器给ajax请求只能响应文本数据（字符串）
open(method,url,async)	浏览器与服务器建立连接	method：请求方式 GET/POST url：发送请求的url async：同步/异步取值true为异步
send()	发送请求	post请求使用该方法提交请求数据

xhr.readyState

xhr当前的状态

javascript

// 当服务器给到ajax响应时 并且 响应的状态码为200

// state: 状态
// 当坐着的时候，state=1
// 当站着的时候，state=2
// 当躺着的时候，state=3

// 当open结束时，readyState=1
// 当send结束时，readyState=2
// 当浏览器真正发送时，readyState=3
// 当浏览器接收到响应时，readyState=4

// 但是响应结束时，状态码又不一定为200
// 200才是正确的，所以要排除404、405、500类似的错误
if (xhr.readyState == 4 && xhr.status == 200) {
}

【小结】

tex

1、原生的AJAX：使用JS技术发送ajax请求；
2、XMLHttpRequest：ajax引擎对象，ajax的所有操作都依赖这个对象；
3、原生AJAX的API:
     1. 创建这个对象：new XMLHttpRequest()
     2. 事件： onreadystatechange
     3. 属性：  readyState, status, responseText
     4. 方法： open("GET",url, true)   ,  send()

原生AJAX案例

【需求】

tex

使用原生的AJAX完成用户名的异步校验案例

【需求分析】

1、业务分析：假设数据库中已存在用户名："buguniao"，如果注册页面再次输入"buguniao"，则提示【用户名已存在！】，如果注册页面输入其他用户名，则提示【用户名可用】；

1553846637015

1553846656682

2、业务实现

tex

【前端】
    1、确定事件：离焦事件
    2、发送请求：
        用户名文本框失去焦点，获取用户名；
        使用ajax给服务器端发送请求；
【后台】
    1、接收请求数据：用户名
    2、处理数据： 校验用户名是否存在
    3、响应数据：如果用户名存在，响应“用户名已存在”
               如果用户名不存在，响应“可以注册”
【前端】
    1、接收响应数据；
    2、把响应数据，局部更新到文本框后面；

【需求实现】

前端：发送请求

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生ajax请求</title>
</head>
<body>
<h2>用户注册</h2>
用户名：
<input type="text" name="userName" id="userName"> <span id="info"></span>
</body>

<script>
    //给用户名文本框绑定 离焦事件
    document.getElementById("userName").onblur = function (ev) {
        //1、获取用户名
        var userName = this.value;
        //2、发送ajax请求，对userName进行异步校验
        //2.1 创建XMLHttpRequest对象：xhr
        var xhr = new XMLHttpRequest();

        //2.2 给xhr绑定监听事件：onreadystatechange
        xhr.onreadystatechange = function (event) {
            //监听请求和响应
            if(xhr.readyState==4 && xhr.status == 200) {
                //请求和响应都OK，获取响应数据
                var response = xhr.responseText;
                 alert(response);
            }
        };
        //2.3 与服务器建立连接
        xhr.open("GET", "/ajaxDemoServlet?userName=" + userName, true);
        //2.4 发送请求
        xhr.send();
    }
</script>
</html>

后台：接收请求，处理数据，响应数据

java

package com.heima.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;

/**
 * @author buguniao
 * @version v1.0
 * @date 2019/3/29 15:57
 * @description 接收ajax请求的Servlet
 **/
@WebServlet("/ajaxDemoServlet")
public class AjaxDemoServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

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

        //1、接收请求数据
        String userName = request.getParameter("userName");

        //2、处理数据，响应数据

        response.setContentType("text/plain;charset=utf-8");
        if ("buguniao".equals(userName)) {
            //3、响应数据
            //用户名已存在
            response.getWriter().println("用户名已存在！");
        }else{
            //3、响应数据
            //用户名不存在
            response.getWriter().println("用户名可用");
        }
    }
}

前端：处理响应数据

把响应数据局部更新到页面中。

1553846969645

Fetch API

快速入门

javascript

fetch("students.json")
.then(function(response) {
  if (response.status != 200) {
    console.log("状态码为: " + response.status);
  } else {
    return response.json();
  }
}).then(function(data) {
  console.log(data);
}).catch(function(err) {
  console.log(err);
});

也可以这么写

javascript

fetch("students.json")
.then(function(response) {
  if (response.status != 200) {
    console.log("状态码为: " + response.status);
  } else {
    response.json().then(function(data) {
      console.log(data);
    });
  }
}).catch(function(err) {
  console.log(err);
});

发送POST请求

javascript

fetch("test", {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  method: "post",
  body: "username=future-weaver&password=123456"
}).then((response) => {
  console.log(response.status);
  if (response.status == 200) {
    return response.json();
  } else {
      return Promise.reject(new Error(response.statusText));
  }
}).then((data) => {
  data => console.log("data")
}).catch((err) => {
  console.log("Request Failed", err)
});

提交JSON数据

javascript

fetch("test", {
  headers: {
    'Content-Type': 'application/json'
  },
  method: "post",
  body: JSON.stringify({
    "username": "future-weaver",
    "password": "123456"
  })
}).then(function(res) {
  res.text().then((data) => {
    console.log(data);
  });
});

发送表单数据

javascript

fetch('test', {
  method: 'POST',
  body: new FormData(document.querySelector("#form"))
}).then((response) => {
  return response.text();
}).then((text) => {
  console.log(text);
}).catch((err) => {
  console.log(err);
})

上传文件

javascript

let formData = new FormData();
let files = document.querySelector("#file").files;
for (let file of files) {
  formData.append('myFile[]', file);
}

fetch('test', {
  method: 'POST',
  body: formData
}).then((response) => {
  return response.text();
}).then((text) => {
  console.log(text);
}).catch((err) => {
  console.log(err);
})

Axios

快速入门

npm i axios -s

javascript

axios.get("user.json")
.then(res => {
    return res.data;
}).then((data) => {
    console.log(data);
}).catch(err => {
    console.log(err);
}).then(() => {
    console.log("不管有没有");
})

发送get请求

javascript

axios({
    method: 'get',
    url: 'user.json',
    params: {
        username: 'zhangsan',
        password: 'lisi'
    }
}).then(res => {
    return res.data;
}).then((data) => {
    console.log(data);
}).catch(err => {
    console.log(err);
}).then(() => {
    console.log("不管有没有");
})

发送post请求

javascript

axios({
    method: 'post',
    url: 'user.json',
    data: {
        username: 'zhangsan',
        password: 'lisi'
    },
    headers: {
        'custom': 'abcdefg'
    }
}).then(res => {
    return res.data;
}).then((data) => {
    console.log(data);
}).catch(err => {
    console.log(err);
}).then(() => {
    console.log("不管有没有");
})

QueryString

axios 在进行 post 请求时，data 中的数据是 json 格式的，很多时候服务器在进行参数处理时，只能接收application/x-www-form-urlencoded格式，即key=value&key=value格式。此时就需要将 json 数据转换为此种格式的字符串，需要借助 QueryString 完成。

node项目使用

bash

npm i qs -s

javascript

import axios from 'axios'
import qs from 'qs'

axios({
    method: 'post',
    url: '/login',
    data: qs.stringify(this.form)
}).then(res => {
    return res.data;
}).then(data => {
    // ...
}).catch(err => {
    console.log(err);
})

纯前端项目使用

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.11.0/qs.min.js"></script>
<script>
    axios({
        method: 'post',
        url: '/login',
        data: Qs.stringify({
            username: 'zhansan',
            password: '123456'
        })
    }).then(res => {
        return res.data;
    }).then(data => {
        // ...
    }).catch(err => {
        console.log(err);
    })
</script>

跨站请求伪造

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

参考资料

main.js

javascript

import Axios from 'axios'

let getCookie = function (cookie) {
    let reg = /csrftoken=([\w]+)[;]?/g
    return reg.exec(cookie)[1]
}

Axios.interceptors.request.use(
  function(config) {
    // 在post请求前统一添加X-CSRFToken的header信息
    let cookie = document.cookie;
    if(cookie && config.method == 'post'){
      config.headers['X-CSRFToken'] = getCookie(cookie);
    }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

jQuery AJAX

js 原生的 Ajax 虽然能够向后台发送请求，但是太过繁琐。jQuery 对原生的 Ajax 方法进行了封装，下面是开发中使用的比较多的 3 种 jQuery 的 Ajax 实现。

请求方式	语法	说明
GET请求	`$.get(url,[data],[callback],[type])`	带[ ]为可选参数
POST请求	`$.post(url,[data],[callback],[type])`	带[ ]为可选参数
AJAX请求	`$.ajax([settings])`
GET签名	`$.get([settings])`	jQuery3.0新增get方法
POST签名	`$.post([settings])`	jQuery3.0新增post方法

jQuery的`$.get`方法

【1】语法介绍

html

$.get(url [, data ] [, success ] [, dataType ])

【2】参数介绍

参数	说明	是否必需
url	请求地址	必需
data	发送给服务器端的请求参数，格式：方式一：`key=value&key=value` 方式二：`{key:value,key:value...}`	可选
success	回调函数：当请求成功后触发的函数	可选
dataType	返回参数类型：取值可以是xml, html, script, json, text, _defaul等，默认text	可选

【3】应用

步骤

导入jQuery框架的js文件
编写文本框失去焦点blur()事件
得到文本框中的姓名
使用$.get方法发送请求给服务器，回调函数的参数就是返回值
根据返回的结果，在回调函数中设置span的text

HTML代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用原生的Ajax</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户注册</h2>
用户名：
<input type="text" name="user" id="user"> <span id="info"></span>
</body>
<script type="text/javascript">
    //文本框失去焦点，访问服务器，判断用户名是否存在
    $("#user").blur(function () {
        //得到文本框中值
        var user = $(this).val();
        //调用jquery的$.get方法：url,data,callback,type
        $.get("/ajaxDemoServlet",{user:user}, function (result) {
            //回调函数的参数就是服务器返回的数据
            $("#info").text(result);
        });
    });
</script>
</html>

Servlet代码

服务器端的代码不变

【4】小结

html

1、$.get()的作用：发送get请求；
2、$.get()的参数：
        url：请求地址，必需
        data:请求参数，可选
        success:回调函数，可选
        dataType:响应数据格式，可选
3、注意事项：
    1、使用前必须先导入jquery.js文件；
    2、data的两种格式：
            格式一：字符串 "name=张三&age=13";
            格式二：对象 {name:"张三",age:13}

jQuery的`$.post`方法

【1】语法介绍

javascript

$.post( 地址 [, 参数 ] [, 成功的回调函数 ] [, 参数类型，默认为text ] )

【2】参数介绍

参数	说明	是否必需
url	请求地址	必需
data	发送给服务器端的请求参数，格式：方式一：`key=value&key=value` 方式二：`{key:value,key:value...}`	可选
success	回调函数：当请求成功后触发的函数	可选
dataType	返回参数类型：取值可以是xml, html, script, json, text, _defaul等，默认text	可选

【3】应用

步骤

html

把jQuery的get请求案例中的$.get()改成$.post() 即可；

HTML代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用原生的Ajax</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户注册</h2>
用户名：
<input type="text" name="user" id="user"> <span id="info"></span>
</body>
<script type="text/javascript">
    //文本框失去焦点，访问服务器，判断用户名是否存在
    $("#user").blur(function () {
        //得到文本框中值
        var user = $(this).val();
        //调用jquery的$.get方法：url,data,callback,type
        $.post("/ajaxDemoServlet",{user:user}, function (result) {
            //回调函数的参数就是服务器返回的数据
            $("#info").text(result);
        });
    });
</script>
</html>

Servlet代码

服务器端的代码不变

【4】小结

tex

1、$.post()的作用：发送post请求；
2、$.post()的参数：
        url：请求地址，必需
        data:请求参数，可选
        callback:回调函数，可选
        type:响应数据格式，可选
3、注意事项：
    1、使用前必须先导入jquery.js文件；
    2、data的两种格式：
            格式一：字符串 "name=张三&age=13";
            格式二：对象 {name:"张三",age:13}

4、GET?POST?
 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
    然而，在以下情况中，请使用 POST 请求：
        无法使用缓存文件（更新服务器上的文件或数据库）--提交表单数据
        向服务器发送大量数据（POST 没有数据量限制） ---文件上传

jQuery的`$.ajax`方法

【1】语法介绍

html

$.ajax([settings])

【2】参数介绍

属性名称	解释
url	请求的服务器端url地址
async	(默认:true)默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type	(默认:"GET")请求方式("POST"或"GET")
dataType	预期的返回数据的类型，取值可以是xml, html, script, json, text, default等
success	请求成功后的回调函数
error	请求失败后的回调函数
complete	请求完成后的回调函数当请求成功时，会进入到success函数; 当请求失败时，会进入到error函数; 二者只会选项一但是不论是请求成功，还是失败，在进入到相应的`success`或`error`方法之后，都会进入到`complete`方法

【3】应用

步骤

html

把$.post()请求案例中发送请求的方式改为$.ajax()请求；

代码

HTML代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用原生的Ajax</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户注册</h2>
用户名：
<input type="text" name="user" id="user"> <span id="info"></span>
</body>
<script type="text/javascript">
    //文本框失去焦点，访问服务器，判断用户名是否存在
    $("#user").blur(function () {
        //得到文本框中值
        var userName = $(this).val();
        $.ajax({
            url:"/ajaxDemoServlet",
            data:{"userName":userName,"age":4},
            async:true,
            type:"GET",
            dataType:"text",
            success:function (result) {
                //处理正常的响应
                $("#info").text(result);
            },
            error:function (errorRes) {
                alert("出现异常了")
            }
        })
    });
</script>
</html>

Servlet代码

服务器端的代码不变

【4】小结

html

1、$.ajax()请求：
    既可发送get请求，又可发送post请求；
    既可处理正常响应，又可处理服务器端的异常响应；
2、$.ajax()请求参数说明：

属性名称	解释
url	服务器访问地址
async	同步或异步，默认是true表示异步
data	发送给服务器的数据
method	GET或POST
dataType	返回的数据类型
success	请求成功后的回调函数
error	请求失败后的回调函数
complete	请求完成后的回调函数

jQuery的`$.get()`方法

【1】语法介绍

html

$.get([settings])；

【2】参数说明

属性名称	解释
url	请求的服务器端url地址
async	(默认:true)默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
dataType	预期的返回数据的类型，取值可以是xml, html, script, json, text, default等
success	请求成功后的回调函数
error	请求失败后的回调函数
complete	请求完成后的回调函数当请求成功时，会进入到success函数; 当请求失败时，会进入到error函数; 二者只会选项一但是不论是请求成功，还是失败，在进入到相应的`success`或`error`方法之后，都会进入到`complete`方法

【3】应用

tex

使用$.get([settings])方法实现用户名异步校验；

步骤

tex

把用户名异步校验案例请求改为$.get([settings])

实现

HTML 代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用原生的Ajax</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户注册</h2>
用户名：
<input type="text" name="user" id="user"> <span id="info"></span>
</body>
<script type="text/javascript">
    //文本框失去焦点，访问服务器，判断用户名是否存在
    $("#user").blur(function () {
        //得到文本框中值
        var userName = $(this).val();
        $.get({
            url:"/ajaxDemoServlet",
            data:{"userName":userName,"age":4},
            dataType:"text",
            success:function (result) {
                //处理正常的响应
                $("#info").text(result);
            },
            error:function (errorRes) {
                alert("出现异常了")
            }
        })
    });
</script>
</html>

服务器端代码不变

【4】小结

get 方法使用了四个参数：

属性名称	解释
url	访问服务器地址
data	发送给服务器数据
success	成功的回调函数，参数是：服务器返回的数据

jQuery的`$.post()`方法

【1】语法介绍

html

$.post([settings])；

【2】参数说明

属性名称	解释
url	请求的服务器端url地址
async	(默认:true)默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
dataType	预期的返回数据的类型，取值可以是xml, html, script, json, text, default等
success	请求成功后的回调函数
error	请求失败后的回调函数
complete	请求完成后的回调函数当请求成功时，会进入到success函数; 当请求失败时，会进入到error函数; 二者只会选项一但是不论是请求成功，还是失败，在进入到相应的`success`或`error`方法之后，都会进入到`complete`方法

【3】应用

html

使用$.post([settings])方法实现用户名异步校验；

步骤

html

把用户名异步校验案例请求改为$.post([settings])

实现

HTML 代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用原生的Ajax</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户注册</h2>
用户名：
<input type="text" name="user" id="user"> <span id="info"></span>
</body>
<script type="text/javascript">
    //文本框失去焦点，访问服务器，判断用户名是否存在
    $("#user").blur(function () {
        //得到文本框中值
        var userName = $(this).val();
        $.post({
            url:"/ajaxDemoServlet",
            data:{"userName":userName,"age":4},
            dataType:"text",
            success:function (result) {
                //处理正常的响应
                $("#info").text(result);
            },
            error:function (errorRes) {
                alert("出现异常了")
            }
        })
    });
</script>
</html>

服务器端代码不变

【4】小结

原生
XMLHttpRequest
get
$.get("url", data, callback)
post
同上
签名 ajax
$.ajax() url: 请求地址 data: 数据 type: 方式 success: 成功后的回调函数
签名 post
$.post() url: 请求地址 data: 数据 success: 成功后的回调函数

get 方法使用了四个参数：

属性名称	解释
url	访问服务器地址
data	发送给服务器数据
success	成功的回调函数，参数是：服务器返回的数据

小结

原生方式

javascript

var xhr = new XMLHttpRequest();
xhr.onreadystatechange =  function() {
   if (xhr.readyState == 4 && xhr.status == 200) {
       // 操作
   }
}
xhr.open("请求方式", "url", true);
xhr.send();

jquery 非签名方式

javascript

$.get("url", 参数, function(result){

}, 数据类型)

javascript

$.post("url", 参数, function(result){

}, 数据类型)

jquery 签名方式

javascript

$.ajax({
   url: ..,
   data: ...,
   type: ...,
   dataType: ...,
   success: function(result) {
       ...
   }
});

javascript

$.get({
   url: ..,
   data: ...,
   dataType: ...,
   success: function(result) {
       ...
   }
});

javascript

$.post({
   url: ..,
   data: ...,
   dataType: ...,
   success: function(result) {
       ...
   }
});

学习目标总结

能够理解异步的概念
能够了解原生 js 的 ajax
能够使用 jQuery 的$.get()进行访问——非签名方式
能够使用 jQuery 的$.ajax()进行访问——签名方式
能够使用 jQuery 3.0 的$.get()新增签名进行访问
能够使用 jQuery 3.0 的$.post()新增签名进行访问

AJAX ​

AJAX的简介 ​

同步与异步 ​

【目标】 ​

【讲解】 ​

【小结】 ​

AJAX的概念 ​

【目标】 ​

【讲解】 ​

【小结】 ​

AJAX的应用场景 ​

【目标】 ​

【讲解】 ​

【1】表单异步校验 ​

【2】搜索框自动联想 ​

【小结】 ​

原生AJAX ​

原生的AJAX及API ​

【目标】 ​

【讲解】 ​

【小结】 ​

原生AJAX案例 ​

【需求】 ​

【需求分析】 ​

【需求实现】 ​

前端：发送请求 ​

后台：接收请求，处理数据，响应数据 ​

前端：处理响应数据 ​

Fetch API ​

快速入门 ​

也可以这么写 ​

发送POST请求 ​

提交JSON数据 ​

发送表单数据 ​

上传文件 ​

Axios ​

快速入门 ​

发送get请求 ​

发送post请求 ​

QueryString ​

node项目使用 ​

纯前端项目使用 ​

跨站请求伪造 ​

jQuery AJAX ​

jQuery的$.get方法 ​

【1】语法介绍 ​

【2】参数介绍 ​

【3】应用 ​

步骤 ​

HTML代码 ​

Servlet代码 ​

【4】小结 ​

jQuery的$.post方法 ​

【1】语法介绍 ​

【2】参数介绍 ​

【3】应用 ​

步骤 ​

HTML代码 ​

Servlet代码 ​

【4】小结 ​

jQuery的$.ajax方法 ​

【1】语法介绍 ​

【2】参数介绍 ​

【3】应用 ​

【4】小结 ​

jQuery的$.get()方法 ​

【1】语法介绍 ​

【2】参数说明 ​

【3】应用 ​

【4】小结 ​

jQuery的$.post()方法 ​

【1】语法介绍 ​

【2】参数说明 ​

【3】应用 ​

【4】小结 ​

小结 ​

学习目标总结 ​

AJAX

AJAX的简介

同步与异步

【目标】

【讲解】

【小结】

AJAX的概念

【目标】

【讲解】

【小结】

AJAX的应用场景

【目标】

【讲解】

【1】表单异步校验

【2】搜索框自动联想

【小结】

原生AJAX

原生的AJAX及API

【目标】

【讲解】

【小结】

原生AJAX案例

【需求】

【需求分析】

【需求实现】

前端：发送请求

后台：接收请求，处理数据，响应数据

前端：处理响应数据

Fetch API

快速入门

也可以这么写

发送POST请求

提交JSON数据

发送表单数据

上传文件

Axios

快速入门

发送get请求

发送post请求

QueryString

node项目使用

纯前端项目使用

跨站请求伪造

jQuery AJAX

jQuery的`$.get`方法

【1】语法介绍

【2】参数介绍

【3】应用

步骤

HTML代码

Servlet代码

【4】小结

jQuery的`$.post`方法

【1】语法介绍

【2】参数介绍

【3】应用

步骤

HTML代码

Servlet代码

【4】小结

jQuery的`$.ajax`方法

【1】语法介绍

【2】参数介绍

【3】应用

【4】小结

jQuery的`$.get()`方法

【1】语法介绍

【2】参数说明

【3】应用

【4】小结

jQuery的`$.post()`方法

【1】语法介绍

【2】参数说明

【3】应用

【4】小结

小结

学习目标总结