7.jQuery中的AJAX
1. 体验AJAX
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>查看手机归属地</title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <form > 手机号码:<input type="text" id="phone" /> <br><button type="button">查找</button> </form> <hr> <div> <p>你的手机归属地：<span></span></p> </div> <script> $(":button").click(function(){ var phone = $("#phone").val(); $.ajax({ url:"https://api.asilu.com/phone/", data:{"phone":phone}, dataType: "jsonp", success:function(rs){ $("div span").text(rs.province+"省"+rs.city+"市, 运营商："+rs.sp) } }) }) </script> </body> </html>
2. 原生AJAX概念
AJAX 全称为“Asynchronous JavaScript And XML”（异步 JavaScript 和 XML），是指一种创建交互 式网页应用的开发技术。
基于web2.0标准，使用XMLHttpRequest进行异步数据交互。
传统的 Web 应用中，用户对页面中的表单进行填写，提交表单后向 Web 服务器发送一个请求，服务 器接收此请求并处理其中的表单，返回一个新的网页。
AJAX的优势
1.无刷新与服务器端进行通信，
2.页面局部刷新
优秀的用户体验 ，提高 Web 程序的性能 ，减轻服务器和带宽的负担
AJAX 的不足
破坏浏览器“前进”、“后退”按钮的正常功能
对搜索引擎的支持不足 （SEO）
跨域问题
2.1 前置基础：
1. 动态DOM操作
2. xml|json
3.http
是一个通信协议
两部份（请求&响应）
请求报文：（4部份组成)
3 次请求
已传输3.3 kB
99.8 kB 条资源
完成：30 ms
DOMContentLoaded：72 ms
加载：70 ms
标头
负载
预览
响应
发起程序
计时
Cookie
- 常规
- 响应头 (11)
- 请求标头已分析视图
请求行：method(请求方法,如：get|post) url(请求地址,如:/s?ie=utf-8) protocol（协议,如HTTP/1.1) 请求头: 主机，如：(Host：baidu.com) 客户端数据，如：(Cookie：userName=mach) 请求内容类型，如:（Content-type:appliction/x-www-form-urlencoded) 引擎标识,如:(User-Agent：Chrome 107） 空行： 请求体: 如果是get这里是空的，post是有请求参数的，如:（“userName=admin&password=888)
响应报文：（4部份组成)
响应行：scheme（协议,如HTTP/1.1) 响应状态码（如：200） 响应状态文本（如：OK) 响应头: Content-type:text/html; charset=utf-8 Content-length:1024 空行： 响应体: 这里是响应内容如：<html> <head>...</head> <body> <p>这是一个页面 </body> </html>
2.2 原生AJAX,上代码
准备两个文件
1.TestServer.html
说明：这个AJAX请求的服务器页面，响应的页面类型为text/html；内容如下：
<span>test</span>
2.index.html
说明：这个是主页面，单击“显示”按钮时发生异步请求：
效果1：请求前
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
效果2：请求后：
关键代码：
<button>显示</button> <h3>下是请求的内容：</h3> <div></div> <script> window.onload = function () { document.querySelector("button").onclick=function () { // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 与服务器建立连接TestServer xhr.open("get", "TestServer.html", true); // 发送异步请求 xhr.send(); // 设置请求状态变化执行的回调函数 xhr.onreadystatechange = function(){ //如果请求完成且响应成功 if(xhr.readyState==4 && xhr.status==200){ let div = document.querySelector("div"); div.innerHTML += "<br>响应状态码:"+xhr.status;//状码码 div.innerHTML += "<hr><br>响应状态文本:"+xhr.statusText; div.innerHTML += "<hr><br>所有响应头:"+xhr.getAllResponseHeaders(); div.innerHTML += "<hr><br>响应体的HTML字符串:"+xhr.response; } }; }; }; </script>
2.3 使用步骤（4步）
1.创建XMLHttpRequest异步请求
参见上面代码中的createXMLHttpReq()函数。因为兼容问题，不同浏览器，甚至版本不同创建方法不一样。
xhr = new ActiveXObject("Microsoft.XMLHTTP");
2.与服务器建立连接
先简单了解http连接：HTTP是超文本传输协议，其定义了客户端与服务器端之间文本传输的规范。HTTP默认使用80端口，这个端口指的是服务端的端口，而客户端使用的端口是动态分配的。当我们没有指定端口访问时，浏览器会默认帮我们添加80端口。我们也可以自己指定访问端口如：http://www.baidu.com:80。 需要注意的是，现在大多数访问都使用了HTTPS协议，而HTTPS的默认端口为443，如果使用80端口访问HTTPS协议的服务器可能会被拒绝。
在搞清楚建立与服务器的连接问题时，我们必须清楚两个重要的基础：
1.请求的方法:
建立http请求的方法有8种，常用的是get和post两种。详细参考：https://www.cnblogs.com/weibanggang/p/9454581.html
2.请求的服务器URL
指的请求的服务器资源，可是一个静态html文件，也要可以是有处理请求和响应能力的动态Servlet或JSP等后端服务器程序。
一个请求报文由请求行、请求头部、空行和请求数据4部分组成。
参考代码：
xhr.open("get", "TestServer.html", true);
3.向服务器发送数据
xhr.send();
先了解http请求｜响应的步骤：
客户端连接到Web服务器->发送Http请求->服务器接受请求并返回HTTP响应->释放连接TCP连接->客户端浏览器解析HTML内容
其实向服务器发送数据很简单，调用XMLHttpRequest对象的send()方法就好了。但我们必须还要了解发送请求时发送了什么内容，服务响应回来的数据有什么内容。
发送HTTP请求
通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成。
服务器接受请求并返回HTTP响应
Web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。
下面的图例是如何使用chrom浏览器查看请求与响应的报文信息，注意：
1.圈起的地方，这是我们要查看的请求行，请求行，响应行和响应头信息。
2.箭头指向的地方是你要按下F12打开代码调试检查窗口后要单击的位置，这样你才能看到请求和响应信息。
3.重点要注意，你必须打开调试检查窗口后，再刷新页，才可以看到右边的内容。
4.在回调函数中针对不同的响应状态进行处理
很明显示，最后是根据请求状态码和响应状态码来处理最后响应回的数据了：
xhr.onreadystatechange = function(){ //如果请求完成且响应成功 if(xhr.readyState==4 && xhr.status==200){ let div = document.querySelector("div"); div.innerHTML += "<br>响应状态码:"+xhr.status;//状码码 div.innerHTML += "<hr><br>响应状态文本:"+xhr.statusText; div.innerHTML += "<hr><br>所有响应头:"+xhr.getAllResponseHeaders(); div.innerHTML += "<hr><br>响应体的HTML字符串:"+xhr.response; } };
ajax请求对象中的onreadychange事件，是指当异常请求对象的readystatus状态发生改变时引发的事件。
readystatus指的是请求过程中，会有5种装状态，分别是从0到4,他们的含义分别是：
0 :请求未初始化；
1：服务器连接已建立；
2：请求已接收；
3：请求处理中；
4：请求已完成，且响应就绪；
HTTP 响应状态码用来表明特定 HTTP 请求是否成功完成。 响应被归为以下五大类：
- 信息响应 (
100–199) - 成功响应 (
200–299) - 重定向消息 (
300–399) - 客户端错误响应 (
400–499) - 服务端错误响应 (
500–599)
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
2.4 常用属性和方法
open(method,url,async) ：
规定请求的类型、URL 以及是否异步处理 请求。
1.method：请求的类型；GET 或 POST
2.url：文件在服务器上的位置
3.async：true（异步）或 false（同步）
send(string) ：
将请求发送到服务器。
string：仅用于 POST 请求，表示传递的 参数，格式为 key1=val1&key2=val2 的查 询字符串
setRequestHeader(header,value)：
向请求添加 HTTP 头。
header: 规定头的名称 value: 规定头的值
onreadystatechange：
是一个异步对象的事件绑定，只有当请求状态发生改变时，调用此方法
回调 函 数 （ 或 函 数 名 ） ， 每 当 readyState 属性改变时，就会调用该函 数。
readyState：
存有 XMLHttpRequest 的状态。
从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收3: 请求处理中 4: 请求已完成，且响应已就绪
Status：
服务器端响应的状态码，例如 200 表示成 功，404 表示未找到页面
response
响应体
responseText:
.就绪处理程序确定 readyState 为已完成并且请求已成功地完成后，就可以从请求对象中获取响应内 容。
参考：
XMLHttpRequest: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
AJAX四种常见请求头与响应类型：
https://www.cnblogs.com/itjeff/p/10240124.html
https://blog.csdn.net/baichoufei90/article/details/84030479
https://blog.csdn.net/u012894692/article/details/88846401
2.5 如何传参
分get和post两种
-
get,在URL后拼接参数， login
?userName=admin&password=888 -
post,在异步请求对象的send()方法中加参数， xhr.send(“userName=admin&password=888”)
<<<<<<< HEAD
jquery表单序列化：$(“form”).serialize() | new FormData(表单域)
URI编码：encodeURIComponent(url)
URI反编码：decodeURIComponent(url)
关于请求参数的头
- application/x-www-form-urlencoded： 默认的表单提交
- multipart/form-data： FormData类型，适用post提交和上传
- application/json：json格式的参数
- text/plain ：纯文本格式
请求头的类型不同（Content-Type)，服务端如何接收参数（请求体）
application/x-www-form-urlencoded:
String value = request.getParameter("参数名"); String[] values = request.getParemeterValues("参数名");
multipart/form-data:
文本同上一样
二进制：
Part part = request.getPart("参数名");
text/plain:
BufferedReader in = request.getReader(); while (in.ready()){ p += in.readLine()+"<br>"; }
7.如何设置请求头
=======
2.6 如何设置请求头
setRequestHeader(请求头关键字，请求头值)
2.7 如何处理响应结果
一般情况下，服务器响应用户一个json对象，而不是一个String字符串
后端服务如何返回一个json对象
PrintWriter out = response.getWriter(); response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); out.print(employeeJsonString); out.flush();
前端客户如何处理这个一个json对象
1.手动转换
JSON.parse()
2.自动转换
xhr.responseType()
9.JSON
1.什么是JSON
2.JSON语法
3.JavaScript如何使用
<<<<<<< HEAD
2.8 跨域
什么是跨域
同源策略
566384456a94a59d81597c5188c96dee19a33fc0
4.java如何使用
10.同源策略
违背同源策略就是跨域
跨域解决：
1.jsonp，只接收get请求
html本身就具有跨域能力：img,link,iframe, script
2.后端服务Servlet实现允许跨域 （写后端的过滤器）
//允许所有的域名 response.setHeader("Access-Control-Allow-Origin","*"); response.setHeader("Access-Control-Allow-Credentials","*"); response.setHeader("Access-Control-Allow-Methods","*"); response.setHeader("Access-Control-Max-Age","3600"); response.setHeader("Access-Control-Allow-Headers","Authorization,Origin,X-Requested-With,Content-Type,Accept,content-Type,origin,x-requested-with,content-type,accept,authorization,token,id,X-Custom-Header,X-Cookie,Connection,User-Agent,Cookie,*"); response.setHeader("Access-Control-Request-Headers","Authorization,Origin,X-Requested-With,content-Type,Accept"); response.setHeader("Access-Control-Expose-Header","*");
有什么作用？写在那里？
3. jQuery中请求参数相关工具函数
serialize()：
将表单元素的值拼接为可提交的参数字符串(表单参数查询字符串)。
结果示例：“userName=zhangsan&age=18”。
用法：
$(表单元素选择器).serialize()
注意：
1.序列化中是不包含表单元素中的文件域对象
2.如果有中文，结果示例：userName=张三&userpwd=bb
为什么会有一串串%xx这类的符号，是因为在将name和value拼接后再进行了URI编码。
URL编码：
为什么要进行编码:
表单提交参数中有些特殊的字符需要传入服务器，如提交的值中有”&“这个符号，&刚好又有参数组分隔符，此时就会将值中的&转为%就可以了。这个转码过程就是URL编码，使用”encodeURI()“。编码的反操作是解码，使用”decodeURI()“.
用法：
encodeURI("name=张三&age=19")//"name=张三&age=19" decodeURI("name=张三&age=19")//"name=张三&age=19"
serializeArray()：
将表单元素的值编译成有name和value的json对象。这个对象同样可以作为请求的参数
结果示例：
[ {name:"userName",value:"zhangsan"}, {name:"age",value:"18"} ]
用法：
$(表单元素选择器).serializeArray();
注意：
serialize()返回的是字符串（String），是一个简单的表单提交参数字符串，这种字符串即适用于Ajax请求的提交参数，也适用于URL地址后查询字符串（xx.html?xxx）。
serializeArray()返回的Json数组对象(Object数组),每个元素都包含name和value。适用于Ajax请求的提交参数
$.param()
将数组或对象拼接为表单提交参数字符串，并且进行URL编码。
用法：
$.param({name:"zhang",hobby:[0,2]})//"name=zhang&hobby[]=0&hobby[]=2"
也可以理解为：
$("form").serialize(); 等效代码 $.param($("form").serializeArray())
案例1
下面表单包含：文本框，单选按钮，多选按钮，下拉框
<form> <input type="text" name="userName"> <br> <label><input type="radio" name="sex" value="0">男</label> <label><input type="radio" name="sex" value="1">女</label> <br> <label><input type="checkbox" name="hobby" value="0">读书</label> <label><input type="checkbox" name="hobby" value="1">游戏</label> <label><input type="checkbox" name="hobby" value="2">运动</label> <br> <select name="education" > <option value="0">大专</option> <option value="1">本科</option> <option value="2">硕士</option> </select> <br> <button type="button">确定</button> </form>
输入数据后在控制台看看结果：
4. jQuery中AJAX请求
load()
load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。
**注意：**还存在一个名为 load 的 jQuery事件方法。调用哪个，取决于参数。
语法：
$(selector).load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )
url:类型: String,一个包含发送请求的URL字符串
data:类型: PlainObject, String,向服务器发送请求的Key/value参数，例如{name:“zhangsan”,age:23}
complete(responseText, textStatus, XMLHttpRequest):类型: Function(),当请求·完成·后执行的回调函数。
responseText- 包含来自请求的结果数据
textStatus- 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
XMLHttpRequest- 包含 XMLHttpRequest 对象
. g e t ( ) ∣ .get()| .get()∣.post()
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
语法：
$.get(url[,param][,success(responseData,textStatus,jqXhr)][,dataType]) $.post(url[,param][,success(responseData,textStatus,jqXhr)][,dataType]) [{"id":1,"userName":"张三","age":18},{"id":2,"userName":"李四","age":18},{"id":3,"userName":"王五","age":18}]
url:类型: String,一个包含发送请求的URL字符串
param:类型: PlainObject, String,发送给服务器的字符串或Key/value键值对。
responseData:响应体
success(data, textStatus, jqXHR):类型: Function(),当请求成功后执行的回调函数。
dataType:类型: String,从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）
jqXhr
是XMLHttpRequest对象超集。是jQuery 自己的 XMLHttpRequest 对象(一般简称jqXHR)。
jqXhr是XMLHttpRequest和Deferred两个对象组合体。 jQuery中Deferred后面再谈。
参考：
https://www.cnblogs.com/czf-zone/p/4375323.html
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
$.ajax()
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get(), $.post()，$(selector).load() 等。
$.ajax() 在jQuery1.5+之后返回jQueryXMLHttpRequest 对象(jQXhr)。
与常用的 . g e t ( ) , .get(), .get(),.post()相比， $.ajax()用对象参数可以获得更多的灵活性。
语法：
jQuery.ajax( url [, settings ] ) jQuery.ajax( [settings ] ) $.ajax({ url:"", type:"", success:function(){ } })
settings见帮助，此处不全部展开，只说明几种常用属性：
url:类型: String，一个用来包含发送请求的URL字符串。
async (默认:
true)，类型: Boolean，默认设置下，所有请求均为异步请求（也就是说这是默认设置为true）。如果需要发送同步请求，请将此选项设置为false。跨域请求和dataType: "jsonp"请求不支持同步操作。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。从 jQuery 1.8 开始, jqXHR ($.Deferred)中使用async: false已经过时。您必须使用的 success/error/complete 的回调选项代替相应的jqXHR对象的方法，比如jqXHR.done()或者过时的jqXHR.success()type (默认:
'GET')，类型: String，请求方式 (“POST” 或 “GET”)， 默认为 “GET”。**注意:**其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。contentType (默认:
'application/x-www-form-urlencoded; charset=UTF-8')，类型: String，发送信息至服务器时内容编码类型。默认值是"application/x-www-form-urlencoded; charset=UTF-8"，适合大多数情况。如果你明确地传递了一个内容类型（Content-Type）给$.ajax()，那么他必定会发送给服务器（即使没有数据要发送）。数据将总是使用UTF-8字符集传递给服务器；你必须在服务器端进行适当的解码。data，类型: [Object, String](https://www.jquery123.com/Types/#Object, String)，发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面。查看
processData选项说明，以禁止此自动转换。对象必须为"{键:值}"格式。如果这个参数是一个数组，jQuery会按照traditional参数的值， 将自动转化为一个同名的多值查询字符串(查看下面的说明)。注：如 {foo:[“bar1”, “bar2”]} 转换为 ‘foo=bar1&foo=bar2’。dataType (默认:
Intelligent Guess (xml, json, script, or html))，类型: String，预期服务器返回的数据类型。complete，类型: Function( jqXHR jqXHR, String textStatus )，请求完成后回调函数 (请求
success和error之后均调用)。这个回调函数得到2个参数： jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 对象和一个描述请求状态的字符串("success","notmodified","error","timeout","abort", 或者"parsererror") 。从jQuery 1.5开始，complete设置可以接受一个函数的数组。每个函数将被依次调用。这是一个Ajax事件 。error，类型: Function( jqXHR jqXHR, String textStatus, String errorThrown )，请求失败时调用此函数。有以下三个参数：jqXHR (在 jQuery 1.4.x前为XMLHttpRequest) 对象、描述发生错误类型的一个字符串 和 捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到
null之外，还可能是"timeout","error","abort"，和"parsererror"。 当一个HTTP错误发生时，errorThrown接收HTTP状态的文本部分，比如： “Not Found”（没有找到） 或者 “Internal Server Error.”（服务器内部错误）。 从jQuery 1.5开始, 在error设置可以接受函数组成的数组。每个函数将被依次调用。 **注意：**此处理程序在跨域脚本和JSONP形式的请求时不被调用。这是一个 Ajax Event。success，类型: Function( Object data, String textStatus, jqXHR jqXHR )，请求成功后的回调函数。这个函数传递3个参数：从服务器返回的数据，并根据dataType参数进行处理后的数据，一个描述状态的字符串;还有 jqXHR（在jQuery 1.4.x前为XMLHttpRequest） 对象 。在jQuery 1.5， *成功设置可以接受一个函数数组。每个函数将被依次调用。*这是一个 Ajax Event
5. 其它
$.ajaxSetup()
为以后要用到的Ajax请求设置默认的值。
$.parseJSON()
接受一个标准格式的 JSON 字符串，返回解析后的Object 对象。
如：
var obj = $.parseJSON('{"name":"zhangsan","age":18}'); console.log(obj);
等效代码
var obj = eval({"name":"zhangsan","age":18});
等效代码
var obj =JSON.parse('{"name":"zhangsan","age":18}');
反操作：
var str = JSON.stringify(obj)
案例2：
请求的目标文件：rs.json
{ "name":"zhangsan", "age":18, "sex":"男" }
源文件的html结构：要求,单击“显示”按钮，将数据显示到
中，且设置class为block。
