章节6.Ajax | 睿晨网

前言

Ajax：Asynchronous JavaScript + XML 的简写，是一种技术，这种技术能够向服务器请求额外的数据而无须刷新页面。Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)。

关于Ajax，我们将分两部分进行讲解，一部分是：原生js进行讲解，另外一部分是jQuery将原生js进行封装之后的方法进行讲解，即jQuery中ajax的应用。

# 一、原生js中的Ajax

# 1、XMLHttpRequest (简称 XHR，XHR API)

回顾之前获取外部json文件

我们在第二学期第1季-章节18-Ⅴ、JSON-② 获取外部json文件

window.onload = function () {
    let json = new XMLHttpRequest();
    json.open("GET", "./demo.json", true);
    json.responseType = "json";
    json.onload = function () {
        console.log(json);
        console.log(json.response);

        console.log(this);
        console.log(this.response);

        if (this.status == 200) {
            let res = this.response;
            console.log(res[0].name);//第一项name值

            res.forEach(element => {
                console.log('name:', element.name);//每一项的name
            });
        } else {
            console.log('请求失败');
        }

    }
    json.send();
}

我们通过new XMLHttpRequest();对象请求数据或文件，实际上我们用的就是ajax。接下来我们对XMLHttpRequest对象做一个深度分析。

# ① 第一步：调用 open()方法准备发送请求（发送请求前的准备工作）：三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步

window.onload = function(){
    //创建XMLHttpRequest对象，可以理解成XMLHttpRequest是一个构造函数，实例化一个对象
    let xhr = new XMLHttpRequest();
    console.log('初始化时候的xhr对象', xhr);
}

创建完XMLHttpRequest 对象后，先调用open方法，这个方法在它的原型上

window.onload = function(){
    //创建XMLHttpRequest对象，可以理解成XMLHttpRequest是一个构造函数，实例化一个对象
    let xhr = new XMLHttpRequest();
    console.log('初始化时候的xhr对象', xhr);
    //第一步：须调用 open()方法：三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步
    //1、请求类型(get、post、put、delete等等)，关于请求类型，后面会说，常用的是get/post两种方式
    //2、关于get/post 区别，我们在后面总结的时候会讲
    //3、请求的 URL: 就是一个网络地址（网址、接口地址）
    //4、是否异步：异步就是跟同步相反的意思，同步大家知道就是发出去立刻返回无需等待
    //异步：就是发送请求出去要等一会，哪怕是1ms，这里可以使用异步也可以使用同步，我们先讲异步 true
    //意思就是：我请求这个json文件，我等了20ms服务器才返回这个json文件数据给我，而这20ms
    //是由于我的网络不通畅导致的，如果你此时在山区，网络信号更差，那需要等待的时间更长
    //所以需要异步,就是发完请求之后要等一会（同步我们后面会讲）

    xhr.open('get','./demo.json',true);//意思是准备发送请求,发送前的准备工作，还没有发送
}

# ② 第二步：通过 send()方法进行发送请求：一个参数：作为请求主体发送的数据，如果不需要则，必须填 null

执行 send()方法之后，请求就会发送到服务器上。

window.onload = function(){
    let xhr = new XMLHttpRequest();
    xhr.open('get','./demo.json',true);//意思是准备发送请求,发送前的准备工作，还没有发送
    xhr.send(null); //发送请求
}

# ③ 第三步：发送完了之后，得监听结果（监听服务器给你的请求结果），通过readystatechange 事件监听服务器给你的结果

特别注意：监听事件readystatechange必须要写在准备发送之前

window.onload = function(){
    let xhr = new XMLHttpRequest();
    //监听服务器返回的结果
    xhr.onreadystatechange = function(){
        console.log('在查看一下xhr',xhr);
        //发现执行了4次，通过readyState 属性得到1,2,3,4
        //1:状态:启动  已经调用 open()方法，但尚未调用 send()方法
        //2:状态:发送  已经调用 send()方法，但尚未接受响应
        //3:状态:接受  已经接受到服务器部分响应数据 
        //4:状态:完成  已经接受到全部响应数据，而且可以使用
        if(xhr.readyState == 4){
           console.log('已经全部接收完数据了',xhr);
           console.log('response',xhr.response);//请求返回的数据
           console.log('response类型',typeof xhr.response);
           console.log('responseText', xhr.responseText);//请求返回的文本数据
           console.log('responseText类型', typeof xhr.responseText);
           console.log('responseType',xhr.responseType);//请求返回的数据类型
           console.log('responseURL',xhr.responseURL);//请求地址
           console.log('status',xhr.status);//200获取成功
           if(xhr.status == 200){
              console.log('获取成功数据',xhr.response)
           }else{
              console.log('获取数据失败')
           }
        } 

    }
    xhr.open('get','./demo.json',true);//意思是准备发送请求,发送前的准备工作，还没有发送
    // xhr.responseType = 'json';
    xhr.send(null); //发送请求
}

# 2、理解get、post请求

在提供服务器请求的过程中，有两种最常用的方式，分别是：GET（get）和 POST（post）。

在web程序上：
get一般是URL提交请求，比如：http://www.net.com/domo.json?username=迪丽热巴&sex=女
post提交一般是表单提交，提交内容不写在网址上面（更多区别我们总结的时候再讲）

在了解这两种请求方式前，我们先了解一下 HTTP 头部信息，包含服务器返回的响应头信息和客户端发送出去的请求头信息。我们可以获取响应头信息或者设置请求头信息。

# ① getAllResponseHeaders()获取整个响应头信息，getResponseHeader()获取单个响应头信息，setRequestHeader()设置请求头信息

//两种头信息：
//1、响应头信息：服务器返回的信息，客户端可以获取，但是不可以设置
//2、请求头信息：客户端发送的信息，客户端可以设置，但不可以获取
window.onload = function(){
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
           if(xhr.status == 200){
                console.log('获取成功数据',xhr);
                //1、响应头信息：服务器返回的信息，客户端可以获取，但是不可以设置
                //使用 getAllResponseHeaders()获取整个响应头信息
                console.log('获取整个响应头信息',xhr.getAllResponseHeaders());
                //使用 getResponseHeader()获取单个响应头信息
                console.log('获取单个响应头信息【Content-Type】',xhr.getResponseHeader('Content-Type'));
           }else{
               console.log('获取数据失败')
           }
        }
    }
    xhr.open('get','./demo.json',true);
    //2、请求头信息：客户端发送的信息，客户端可以设置，但不可以获取
    xhr.setRequestHeader('username',encodeURIComponent('迪丽热巴'));//设置请求头信息，中文需转码
    //在get方式提交用处不大，一般post提交数据的时候，携带cookie或者token给服务器用得比较多

    // xhr.responseType = 'json';
    xhr.send(null);
}

# ② get请求

最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。
xhr.open('get','./demo.json?username=123&sex=女',true);
一般传参的时候，比如上面的sex=女，这个值：女，传递之前，需要encodeURIComponent('女')编码一下，以免乱码。

# ③ post请求

当我们请求或者提交的数据量比较大的时候，我们一般采用post请求，而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法向服务器提交数据。

window.onload = function(){
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
           if(xhr.status == 200){
                console.log('获取成功数据',xhr)
                
           }else{
               console.log('获取数据失败')
           }
        }
    }
    xhr.open('post','./demo.json',true);
    // xhr.responseType = 'json';
    //一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的处理
    //因为POST 请求和 Web 表单提交是不同的，需要使用 XHR 来模仿表单提交
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('username=123&sex=女');//send方法里面加一些内容
}

# ④ 小结get和post请求

简单小结get和post请求： (更多区别会在后面的项目中，给大家讲解)

参数传递方式：GET请求将参数附加在URL的查询字符串中，例如：http://www.net.com/demo.json?username=123&sex=女。而POST请求将参数放在请求的消息体中，不会直接暴露在URL中。

请求长度限制：GET请求对URL长度有限制，不同浏览器和服务器对长度限制的具体要求有所不同，一般在几千个字符左右(通常在2KB到8KB之间)。POST方法将数据放在HTTP请求体中，因此数据大小不受限制。但是，Web服务器和Web应用程序可能会对POST请求的大小进行限制。这是为了避免网络拥塞和服务器过载等问题。通常，Web服务器和Web应用程序对POST请求的大小限制在1MB到2MB之间。

安全性：GET请求的参数暴露在URL中，容易被拦截和篡改，因此不适合传输敏感信息。POST请求的参数在消息体中，相对安全一些，但仍然可以被拦截和修改。

缓存处理：GET请求会被浏览器缓存，如果再次发送相同的GET请求，浏览器可能直接返回缓存的结果，不会再向服务器发送请求。而POST请求不会被缓存，每次发送都会向服务器请求最新的数据。

使用场景：GET请求适合获取数据，例如获取文章列表、查询信息等。POST请求适合提交数据，例如提交表单、创建资源等。

总结来说，GET请求适合获取数据，参数在URL中，有长度限制，不安全；而POST请求适合提交数据，参数在消息体中，没有长度限制，相对安全。根据具体的需求和场景，选择适合的请求方法。

# 3、Fetch API

前言

在早期，IE浏览器率先提出了一套API来完成请求的发送（其它浏览器紧随其后跟进），这套API主要依靠一个构造函数完成，该构造函数的名称为：XMLHttpRequest，简称XHR，也就是我们上面讲的内容。所以这套API又称之为XHR API。

由于XHR API存在一些缺陷，写起来也麻烦，于是在HTML5和ES6发布后，产生了一套更完善的API来发送请求，这套API使用的是一个叫做 fetch()的函数，因此这套API又称为 Fetch API。

也就是说，不论是XHR API 或者 Fetch API，它们都是实现ajax的技术手段，只是API用法不同。并且，由于都是浏览器提供的原生方法，因此，它们两套API都是原生api，所有现代浏览器默认都支持。

# ① Fetch API基本用法介绍

window.onload = function(){
    //console.log(window.fetch);//原生内置方法，所有浏览器都支持
    //默认get请求，返回的是一个Promise(关于什么是Promise我们后面会讲到)
    //当收到服务器的响应头之后，类似上面 xhr.readyState == 3，接收服务器部分数据了，Promise就完成了
    //完成之后，怎么获取结果.then()方法
    fetch('./demo.json').then(function(response){
        console.log('看一下response',response);//此时这里已经可以拿到服务器的响应头了
        //查看里面的headers，它这个里面有get()方法拿响应头，has()方法判断有没有某一个响应头
        console.log(response.headers.get('Content-Type'));
        //那我们看一下如何获取响应体，就是返回给我们的数据
        //注意我们刚刚说了，我们then()方法 相当于 xhr.readyState == 3，此时响应体数据还没有接收完
        //也就是说需要它继续接收响应体，直到接收完毕，类似我们上面的 xhr.readyState == 4
        //response原型里面有两个函数方法：json() text() 表达的意思都是继续接收响应体
        //json() text()方法的区别在于怎么看待这个响应体，类似与我们上面的：response 、 responseText
        //当成json格式看待用：json()  当成纯文本看待用：text()
        //当成json格式看待，当我们接收完响应体之后，它得到的就是一个json对象，或者叫js对象
        //如果当初纯文本格式看待，当我们接收完响应体之后，它得到的就是一个字符串
        // console.log(response.json());//返回的是promise 
        //那么既然返回的是promise，那么就可以继续用then()方法
        return response.json();//返回接收的响应体数据，在下一个then里面打印即可，因为当前then只是状态3
    }).then(function(response){
        console.log('看一下接收完数据的response',response);
    })
}

window.onload = function(){
    // fetch('./demo.json').then(function(response){
    //     return response.json();
    // }).then(function(response){
    //     console.log('看一下接收完数据的response',response);
    // })
    fetch('./demo.json',{
        method: 'post',//默认get
        headers: {
            'Content-Type': 'application/json'
        },
        body:{
            username:encodeURIComponent('迪丽热巴'),
            sex:'女'
        }
        //更多参数我们项目开发中再讲
    }).then(res => res.json()).then(res =>{
        console.log('看一下接收完数据的response',res);
    })
}

# ② XHR 与 Fetch 中的Content-Type(或者小写content-type)

content-type 请求携带的数据的类型

application/x-www-form-urlencoded：表示数据被编码成以 ‘&’ 分隔的键 - 值对，同时以 ‘=’ 分隔键和值

application/json：表示是一个json类型

text/plain：表示是文本类型

application/xml：表示是xml类型

multipart/form-data：表示是上传文件

参考https://blog.csdn.net/ximing020714/article/details/129326246

# 4、 XHR（xhr）与 Fetch（fetch）的区别（包括：jQuery、Axios、umi-request的说明）

那么有的同学不禁要问，那是不是以后就可以完全抛弃XHR，只用Fetch就可以了呢？我们来看一下对比

功能 XHR Fetch

基本的请求能力 √ √

基本的获取响应能力 √ √

监控请求进度 √ ×

监控响应进度 √ √

Service Worker中是否可用 × √

控制cookie的携带 × √

控制重定向 × √

请求取消 √ √

自定义referrer × √

流 × √

API风格 Event √

活跃度停止更新还在更新

功能	XHR	Fetch
基本的请求能力	√	√
基本的获取响应能力	√	√
监控请求进度	√	×
监控响应进度	√	√
Service Worker中是否可用	×	√
控制cookie的携带	×	√
控制重定向	×	√
请求取消	√	√
自定义referrer	×	√
流	×	√
API风格	Event	√
活跃度	停止更新	还在更新

从表格可以看到，XHR能做的事情，Fetch都能做，只有一样做不了，就是监控请求进度。这也就意味着，如果你要做文件的上传的进度监控的话，那么Fetch就不合适了，只能用XHR。

因此，我们在学习的时候，两个都要学习。这是浏览器原生支持的，它是写入了HTML5的标准的。

除了原生之外呢，有些开发者觉得原生的不好用，所以需要对原生的做一些封装。于是产生了一些第三方库，诸如：jQuery中的ajax，Axios 打开Axios中文官网，umi-request这些第三方库

但是注意：

所有的第三方库，它的功能边界一定是原生决定的。也就是，原生能做到的事情，你封装过后也可能做到，而原生做不到的事情，你封装过后一定做不到。原生的能力，决定了库和框架的边界，所有的第三方库都是基于原生写的封装的，原生能做的它才有机会做，否则是不可能做到的。

这也就意味着：像Axios这样的库，它在浏览器端，是使用XHR封装的，因此Axios就继承了XHR的所有优点和缺点，也就意味着，表格中XHR打叉叉的地方，Axios它也一定做不到。

同理，umi-request这个库是用Fetch封装的，也就意味着，Fetch做不到的监控请求进度，umi-request这个库也是一样做不到，除非，针对监控请求进度，umi-request又用XHR来实现一遍。而且，像这些第三方库的封装，由于它们是用原生写的，而原生的代码它所运行的环境，也就决定了这些第三方库所运行的环境，比方说，AJAX运行的环境是什么？是浏览器，你脱离了浏览器就谈不上AJAX，这就决定了那些第三方库，用XHR 或者Fetch 封装的时候，它也只能在浏览器环境里面运行，除非你加入了其他环境的代码，比如说像Axios它有两套代码，一套是针对浏览器的代码，一套是针对Node环境的代码。

所以，希望通过老师的讲解，同学们搞清楚它们的关系。

# 二、jQuery中的Ajax

我们上一节课已经讲了，jQuery中的Ajax 还有 Axios 是对我们原生js中的XHR对象做了封装，对于封装的方式，jQuery 采用了三层封装：最底层的封装方法为：$.ajax()，而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()方法。接下来我们将围绕着三层封装进行学习使用。

# 1、第二层封装：load()方法，$.get()和$.post()方法

# ① load()方法是局部方法：异步加载静态文件如：html文件、json文件等

load()方法是局部方法，因为它需要一个包含元素的 jQuery 对象作为前缀，对于用途而言，load()方法适合做静态文件的异步获取。

关于异步和同步再举个例子说明一下区别：先说同步，我们普通的 Web 程序开发基本都是同步的，因为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。

新建 /1.html文件
<div title="属性节点" class="text-danger">测试Div</div>
<div class="text-success">我在1.html</div>
<div id="box" >
   <span class="text-success">异步加载json</span>
   <span class="text-dark">异步加载html</span> 
   <span class="text-danger">$.get方法</span>
   <span class="text-info">$.post方法</span>   
</div>
<div id="pox" class="bg-light"></div>
$(function(){
    //加载json
    $('#box .text-success').click(function(){
       $('#pox').load('./demo.json')
    });
    //加载html
    // $('#box .text-dark').click(function(){
    //     $('#pox').load('./1.html')
    // });
    //筛选加载的html，只需要在 url 参数后面跟着一个选择器即可
    $('#box .text-dark').click(function(){
        $('#pox').load('./1.html .text-success')
    });
 });

# ② $.get()和$.post()方法：是全局方法，无须指定某个元素，适合传递参数到服务器请求数据

$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，适合传递参数到服务器请求数据。

$(function(){
    //$.get方法：get请求
    $('#box .text-danger').click(function(){
        //参数：url地址，额外参数(条件)data，回调函数fn，[服务器返回的内容格式type，一般默认不填程序会自动判断]
        //内容格式:包括 xml、html、script、json、jsonp 和 text
        //第一个参数必填，后面的选填
        // $.get('./demo.json',{
        //     username:'123',
        //     sex:'女'
        // },function(response, status, xhr){
        //     //response 服务器返回的响应结果
        //     //status:响应的 HTTP 状态,success 获取 error
        //     //xhr: 都知道XMLHttpRequest对象
        //     console.log('response:',response);
        //     console.log('response类型:',typeof response);
        //     console.log('status:',status);
        //     console.log('xhr:',xhr);
        // },'json');

        $.get('./demo.json',function(response, status, xhr){
            console.log('response:',response);
            console.log('response类型:',typeof response);
            console.log('status:',status);
        });

    });
 });

$(function(){
    //$.post方法：post请求
    $('#box .text-info').click(function(){
        //参数：url地址，额外参数(条件)data，回调函数fn，[服务器返回的内容格式type，一般默认不填程序会自动判断]
        //内容格式:包括 xml、html、script、json、jsonp 和 text
        //第一个参数必填，后面的选填
        // $.post('./demo.json',{
        //     username:'123',
        //     sex:'女'
        // },function(response, status, xhr){
        //     //response 服务器返回的响应结果
        //     //status:响应的 HTTP 状态,success 获取 error
        //     //xhr: 都知道XMLHttpRequest对象
        //     console.log('response:',response);
        //     console.log('response类型:',typeof response);
        //     console.log('status:',status);
        //     console.log('xhr:',xhr);
        // },'json');

        $.post('./demo.json',function(response, status, xhr){
            console.log('response:',response);
            console.log('response类型:',typeof response);
            console.log('status:',status);
        });

    });
 });

# 2、最高层封装：$.getJSON() 和 $.getScript()

jQuery 提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的接口或者 JS 文件；$.getJSON()，用于专门加载 JSON 文件。

# ① $.getJSON()方法：专门用于加载 JSON 文件的

$.getJSON()方法是专门用于加载 JSON 文件的

$(function(){
    //$.getJSON()方法是专门用于加载 JSON 文件的
    //和 $.get()方法，$.post()方法用法类似，但是没有第四个参数，安全性相对高点
    $.getJSON('./demo.json',{
        username:123,
        sex:'女'
    },function(response, status, xhr){
        console.log('response:',response);
        console.log('status:',status);
        console.log('xhr:',xhr);
    });
});

# ② $.getScript()方法：按需加载接口或js文件

1、比如说：客户在提交留言的时候，我想知道客户所在的城市用来甄别他的留言请求真伪，他不提交留言我也懒得知道他在哪（因为这个免费接口每天有访问次数限制，以免浪费次数），这个时候就可以考虑按需加载接口

① 获取所在城市接口：https://whois.pconline.com.cn/ipJson.jsp [接口具体介绍]
② 搜狐提供的免费接口获取所在城市（时灵时不灵）http://pv.sohu.com/cityjson
③ 淘宝获取ip: https://www.taobao.com/help/getip.php
特别说明：上面的接口只是作为演示用，讲解一下$.getScript()方法按需加载逻辑而已，若真有这方面的需求，可以采用百度、腾讯、高德地图给我们提供的定位服务，后面的课程有关于这方面知识的讲解，大家不用着急。
$.getScript('http://pv.sohu.com/cityjson',function(){
   //回调函数获取接口返回结果，本接口返回的结果是：
   //var returnCitySN = {"cip": "xxx.xx.xx.x", "cid": "00", "cname": "未知"};
   //这个结果 returnCitySN 通过var声明，说明是全局变量，属于window的属性，因此可以直接打印
   console.log(returnCitySN);
   console.log(returnCitySN.cname);
});

2、再比如说：基于jQuery的网页上，开发了一百个功能，需要用到一百个jQuery插件，那是不是要在网页head里面引入一百个插件呢？很明显很多功能，是需要用户操作在去实现这个功能，很多功能没必要一开始，页面一打开就全部引入这些插件，插件一开始全部引入，不仅影响页面性能，而且有可能插件之间产生方法的互斥等等可能，那么这个时候可以考虑按需引入插件js文件。

举个例子，jQuery中有一款插件是生成网页二维码的：jquery.qrcode [使用说明]

<div id="box" >
  <span class="text-warning">$.getScript方法</span>
</div>
<div id="pox" class="bg-light"></div>
$(function(){ 
    $('#box .text-warning').click(function(){
        $.getScript('https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js',function(){
            //先加载二维码插件，在执行里面的方法
            //render        绘制方式 canvas(绘制成一张图片) table(绘制成一个表格) 默认 canvas
            //width         二维码宽度  默认 256
            //height        二维码高度  默认 256
            //correctLevel  容错等级    1(L),0(M),3(Q),2(H)    1 最低, 2 最高  默认为 2
            //background    背景颜色    默认白色    #ffffff
            //foreground    前景颜色    默认黑色    #000000
            // 使用示例
            $("#pox").qrcode({ 
                render: "table", //table方式 默认 canvas
                width: 200, //宽度 
                height:200, //高度 
                //background: "#eceadb",//背景颜色
                //foreground: "#444",//前景颜色
                text: "https://docs.51yrc.com/secondless/w-b/Ajax.html" //任意内容 
            }); 
        });
    });
 });

# 3、最底层的封装：$.ajax()

$.ajax()是jQuery封装的所有ajax方法中最底层的方法，所有其它方法都是基于$.ajax()方法的封装。这个方法只有一个参数，传递一个各个功能键值对的对象。

简单点说：就是，$.ajax()可以替代上面讲的所有方法，因为上面讲的方法，都是在这个方法的基础上再次做的封装。

$.ajax()方法传递的对象参数表

参数	类型	说明
url	String	发送请求的地址
type	String	请求方式：POST 或 GET，默认 GET
timeout	Number	设置请求超时的时间（毫秒）
data	Object 或 String	发送到服务器的数据，键值对字符串或对象
dataType	String	返回的数据类型，比如 html、xml、json 等
beforeSend	Function	发送请求前可修改 XMLHttpRequest 对象的函数
complete	Function	请求完成后调用的回调函数
success	Function	请求成功后调用的回调函数
error	Function	请求失败时调用的回调函数
global	Boolean	默认为 true，表示是否触发全局 Ajax
cache	Boolean	设置浏览器缓存响应，默认为 true。如果 dataType类型为 script 或 jsonp 则为 false。
content	DOM	指定某个元素为与这个请求相关的所有回调函数的上下文。
contentType	String	指定请求内容的类型 , 默认为 application/x-www-form-urlencoded。
async	Boolean	是否异步处理。默认为 true，false 为同步处理
processData	Boolean	默认为 true，数据被处理为 URL 编码格式。如果为 false，则阻止将传入的数据处理为 URL 编码的格式。
dataFilter	Function	用来筛选响应数据的回调函数。
ifModified	Boolean	默认为 false，不进行头检测。如果为 true，进行头检测，当相应内容与上次请求改变时，请求被认为是成功的。
jsonpCallback	String	指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback。
username	String	在 HTTP 认证请求中使用的用户名
password	String	在 HTTP 认证请求中使用的密码
scriptCharset	String	当远程和本地内容使用不同的字符集时，用来设置 script 和 jsonp 请求所使用的字符集。
xhr	Function	用来提供 XHR 实例自定义实现的回调函数
traditional	Boolean	默认为 false，不使用传统风格的参数序列化。如为 true，则使用。

简单示例

//$.ajax()用法
$.ajax({
   type: 'POST', //这里可以换成 GET
   url: './demo.json',
   data: {
      username:123,
      sex:'女'
   },
   success: function (response, stutas, xhr) {
      console.log(response)
   }
});

更详细的用法会在我们后面的实战案例里面给大家展示和讲解。

# 4、表单序列化

<form id="myForm" name="yourForm" class="my-5 flex justify-center">
   <select name="usertype">
      <option value="学生value">学生text</option>
      <option value="老师value">老师text</option>
      <option value="管理员value">管理员text</option>
      <option>无</option>
   </select>
   <input type="radio" name="sex" value="男" > 男
   <input type="radio" name="sex" value="女" checked="checked">  女
   <input type="checkbox" name="loves" value="篮球" checked="checked"> 篮球
   <input type="checkbox" name="loves" value="足球" checked="checked">  足球
   <input type="checkbox" name="loves" value="乒乓球" >  乒乓球
   账号：<input type="text" name="username" value="abc">
   <!--<input id="sub"  type="submit" value="提交"  > -->
   <input id="sub"  type="button" value="提交"  >
</form>

# ① 常规形式的表单提交（表单提交数据）

注意：
直接按提交按钮，回顾前面的知识我们说过：form表单中的type="submit"会自动进行表单数据的提交，采用的是GET方式提交，将提交数据放在网址的后面。
我们可以采用阻止默认行为，或者将提交按钮类型改成type="button"通过点击事件提交。

$('form input[type=button]').click(function(){
   // console.log($('input:checked[name=loves]'));//集合
   $.ajax({
      type: 'POST', //表单提交我们采用post, get方式数据量小也可以
      url: './xxx',//提交给服务器的接口地址，一般后端程序员给你一个接口（当然你可以自己写一个接口）
      data: { // 搜索文档：表单提交数据，传递的是对象键值对参数object
            username : $('input[name=username]').val(),
            usertype : $(':selected')[0].value,
            sex : $('input:checked[name=sex]')[0].value,
            loves : function(){
               let loves = $('input:checked[name=loves]');
               let str = '';
               for(let i=0;i<loves.length;i++){
                  if(!str){
                        str = loves[i].value;
                  }else{
                        str += ',' + loves[i].value;
                  }
               }
               return str;
            }
      },
      beforeSend:function(xhr){
            // console.log(this);
            $('form input[type=button]').val('提交中，请稍后...');
      },
      success: function (response, stutas, xhr) {
            $('form input[type=button]').val('提交');
            console.log(response)
      }
   });
});

我们发现，如果表单字段多了的话，处理起来非常麻烦

# ② jQuery中的表单序列化提交数据（表单提交数据）

$('form input[type=button]').click(function(){
   // console.log($('input:checked[name=loves]'));//集合
   $.ajax({
      type: 'POST', //表单提交我们采用post , get方式数据量小也可以
      url: './xxx',//提交给服务器的接口地址，一般后端程序员给你一个接口（当然你可以自己写一个接口）
      data:$('form').serialize(),//表单序列化，以字符串的形式传递String
      beforeSend:function(xhr){
            // console.log(this);
            $('form input[type=button]').val('提交中，请稍后...');
      },
      success: function (response, stutas, xhr) {
            $('form input[type=button]').val('提交');
            console.log(response)
      }
   });
});

# ③ $.param()方法将对象转换为字符串键值对格式

$('form input[type=button]').click(function(){
   // console.log($('input:checked[name=loves]'));//集合
   $.ajax({
      type: 'POST', //表单提交我们采用post , get方式数据量小也可以
      url: './xxx',//提交给服务器的接口地址，一般后端程序员给你一个接口（当然你可以自己写一个接口）
      //data:$('form').serialize(),//表单序列化
      /*
      data: { // 传递的是对象键值对参数object
            username : $('input[name=username]').val(),
            usertype : $(':selected')[0].value,
            sex : $('input:checked[name=sex]')[0].value,
            loves : function(){
               let loves = $('input:checked[name=loves]');
               let str = '';
               for(let i=0;i<loves.length;i++){
                  if(!str){
                        str = loves[i].value;
                  }else{
                        str += ',' + loves[i].value;
                  }
               }
               return str;
            }
      },
      */
      //使用$.param()将对象形式的键值对转为 URL 地址的字符串键值对，可以更加稳定准确的传递表单内容
      data:$.param({ 
            username : $('input[name=username]').val(),
            usertype : $(':selected')[0].value,
            sex : $('input:checked[name=sex]')[0].value,
            loves : function(){
               let loves = $('input:checked[name=loves]');
               let str = '';
               for(let i=0;i<loves.length;i++){
                  if(!str){
                        str = loves[i].value;
                  }else{
                        str += ',' + loves[i].value;
                  }
               }
               return str;
            }
      }),
      beforeSend:function(xhr){
            // console.log(this);
            $('form input[type=button]').val('提交中，请稍后...');
      },
      success: function (response, stutas, xhr) {
            $('form input[type=button]').val('提交');
         console.log(response)
      }
   });
   //查看一下表单序列化得到的是什么
   console.log($('form').serialize());//字符串形式的键值对，并对URL进行了编码
   
   //当传递的data是对象键值对传递的时候，键值对过多，有时程序对于复杂的序列化解析能力有限
   //此时可以提前对对象键值对序列化
   //使用$.param()将对象形式的键值对转为 URL 地址的字符串键值对，可以更加稳定准确的传递表单内容
});

# 5、jQuery中的跨域jsonp

# ① jQuery中的跨域jsonp使用

关于什么是跨域，我们后面课程会给大家讲解。

//初略理解跨域：当前服务器域名和你访问的服务器域名不同（更多理解后面会讲）
//远程另外一台服务器
$.ajax({
   url:'https://www.taobao.com/help/getip.php',
   type:'get',
   dataType:'jsonp',//处理跨域问题
   jsonpCallback:'ipCallback',//根据另外一台服务器回调的名字确定（没有则不填）
   success:function(response){
      console.log(response);
   }
});
//1、远程另外一台服务器公开的api接口
//2、处理域名不一致问题，可用jsonp尝试

# ② 延伸一下：jQuery中的跨域jsonp模拟百度搜索提示数据

<div id="jsonp" style="margin-left: 100px;">
   <input type="text" style="width: 500px;height: 50px;" >
   <ul id="response"></ul>
</div>

//常用参数
// $.ajax({
//     url:'',//请求地址
//     datatype:'jsonp',//发送jsonp请求必须指定数据类型为jsonp
//     jsonp:'参数名',//服务器接收回调函数的参数名如callback ,cb等等默认callback
//     jsonpCallback:'回调函数名',//默认jQuery123545_43456。。。。的随机字符串，可以自定义
//     success:function(){}
// });
//模拟一下百度搜索输入关键词提示效果
//看一下请求地址：https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&
//sugsid=39676,39712,39764,39779,39790,39703,39795,39688,39662,39678,39817,39664,39784,39840&
//wd=jquery%20&his=%5B%7B%22time%22%3A1701315176%2C%22kw%22%3A%22%24.> > ajax%20beforesend%22%2C%22fq%22%3A2%7D%2C%7B%22time%22%3A1701326047%2C%22kw%22%3A%22jq%20datatype%3A%27jsonp%27%22%2C%22fq%22%3A2%7D%2C%7B%22time%22%3A1701328395%2C%22kw%22%3A%22%E7%BE%8E%E5%A5%B3%22%2C%22fq%22%3A4%7D%2C%7B%22time%22%3A1701328453%2C%22kw%22%3A%22jquery%22%2C%22fq%22%3A2%7D%5D&req=2&bs=jquery&pbs=jquery&csor=7
//&pwd=jquery&cb=jQuery1102013659887251776048_1701328381053&_=1701328381078
//我们只需提取有用的参数 wd对应搜索的值，cb对应回调函数的名称基于这两个参数就可以实现我们的功能 
//压缩一下url地址 ---- https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc
//于是可以：当键盘抬起时发送请求，并将请求的结果显示在输入框下面
$('#jsonp input').keyup(function(){
   // console.log($(this).val());
   let word = $(this).val();
   $.ajax({
      url:'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc',//请求地址
      data:{
         wd:word
      },
      dataType:'jsonp',//发送jsonp请求必须指定数据类型为jsonp
      jsonp:'cb',//服务器接收回调函数的参数名如callback ,cb等等默认callback
      // jsonpCallback:'回调函数名',//默认jQuery123545_43456。。。。的随机字符串，可以自定义
      success:function(response, status, xhr){
            // console.log('response:',response);
            let data = response.g;
            // console.log(data);
            let str = '';
            $.each(data,function(index,value){
               str += "<li>"+value.q+"</li>"
            });
            $('#response').html(str);
      }
      
   });
});

# 6、 jqXHR 对象: when()方法、done()方法、always()方法和fail()方法

//它是原生对象 XHR 的一个超集
//jqXHR就是$.ajax()返回的对象
let jqXHR = $.ajax({
   url:'./demo.json',
   type:'post',
   // success:function(){}, //外面连缀用done()
   // error:function(){},//外面连缀用fail()
   // complete:function(){},//外面连缀用always()
});
console.log(jqXHR);
jqXHR.done(function(response){
   console.log('response',response  + '第一次');
}).done(function(response){
   console.log('response2',response + '第二次');
});

//另外，方便同时执行多个成功后的回调函数
let jqXHR2 = $.ajax({
   url:'https://www.taobao.com/help/getip.php',
   dataType:'jsonp',
   jsonpCallback:'ipCallback',
});
//when可以理解成当两个jqXHR, jqXHR2都执行请求之后，在处理后面
//意思是可以同时处理两个或者多个jqXHR对象
$.when(jqXHR, jqXHR2).done(function (r1,r2) {
   console.log('第一个ajax的response',r1)
   console.log('第二个ajax的response',r2)
});

总结：

以上就是本章节关于Ajax请求服务器的基本知识了，通过对以上方法的学习，大家需要大体理解ajax请求服务器数据的流程，更多关于ajax方法的知识，我们会在后面实战中跟大家讲解。

在本章节最后，有同学提出疑问，说老师，我们向服务器提交表单数据，需要后端程序员给我接口，或者我自己写接口，那接口我不会写啊！另外，在我们的印象中，后端程序一般用的语言非常复杂，比如：php、java、c#、Asp.net、Jsp、Python、Perl、Ruby等等，用它们这些语言来处理前端的请求，这些语言好难，有没有我们前端不需要学这些语言，一样可以处理服务器请求的呢？

答案是：有的。就是我们的 Node.js，它可以像我们后端的这些语言一样，帮我们处理复杂的服务器请求，我们将在下一章节，给大家讲node的基础知识。

# ② css()方法传递多个样式属性的数组，得到样式属性值对象数组，$.each(box,function(attr,value){})遍历原生态对象数组，jQuery对象数组采用$(selector).each(function(index,element){})方法遍历

# 其它学期课程

# 第一学期（学习顺序：01）

第一学期课程专为零基础的学员定制录制的，纯html+css做企业网站的网页，主讲html和css的相关基础知识，flex布局相关知识，封装css基础样式库，引入字体图标及网页开发基础布局思维，完成企业网站网页的开发过程。

[第一学期学习视频]

# 第二学期【第1季】（学习顺序：02）

主讲JavaScript的基础，建议所有学员观看。
[第1季学习文档] [第1季学习视频]

# 第二学期【第2季】（学习顺序：03）

JavaScript中的面向对象，类，ajax，封装js库过渡到jQuery， vue.js基础配置网站页面，建议所有学员观看。
[第2季学习文档] [第2季学习视频]

# 第二学期【第3季】（学习顺序：04）

egg.js基础，响应式网页布局，Bootstrap框架，响应式后台系统管理，完整企业网站前后台开发，建议所有学员观看。
[第3季学习文档] [第3季学习视频]

# 第二学期【第4季】（学习顺序：05）

主要对第三季，同学们开发的企业网站，进行一个完整的上线运维流程的一个讲解，同学们将网站开发完成之后，如何进行上线运维，将项目交付给客户。
[第4季学习文档] [第4季学习视频]