关于Ajax的介绍
AJAX: 全称Asynchronous JavaScript And XML,即异步JS和XML。
Ajax特点:
优点:
- 可以无需刷新页面,与服务器进行通信。
- 允许依据用户事件来更新部分页面内容。
缺点:
- 没有浏览历史,不能回退
- 存在跨域问题(同源)
- SEO不友好(搜索引擎优化,对爬虫不友好)
HTTP协议
HTTP(hypertext transport protocol)协议超文本传输协议),协议详细规定了浏览器和万维网服务器之间互相通信的规则。(一种约定,规则)
请求报文
1 | 请求行 POST /url HTTP/1.1 |
响应报文
1 | 响应行 HTTP/1.1 200 OK |
状态码
状态码分类 | 说明 |
---|---|
1xx | 响应中——临时状态码,表示请求已经接受,告诉客户端应该继续请求或者如果它已经完成则忽略它 |
2xx | 成功——表示请求已经被成功接收,处理已完成 |
3xx | 重定向——重定向到其它地方:它让客户端再发起一个请求以完成整个处理。 |
4xx | 客户端错误——处理发生错误,责任在客户端,如:客户端的请求一个不存在的资源,客户端未被授权,禁止访问等 |
5xx | 服务器端错误——处理发生错误,责任在服务端,如:服务端抛出异常,路由出错,HTTP版本不支持等 |
常见响应状态码
图像
状态码 | 响应状态字符 | 说明 |
---|---|---|
200 | OK | 客户端请求成功,即处理成功,这是我们最想看到的状态码 |
302 | Found | 指示所请求的资源已移动到由Location响应头给定的 URL,浏览器会自动重新访问到这个页面 |
304 | Not Modified | 告诉客户端,你请求的资源至上次取得后,服务端并未更改,你直接用你本地缓存吧。隐式重定向 |
400 | Bad Request | 客户端请求有语法错误,不能被服务器所理解 |
403 | Forbidden | 服务器收到请求,但是拒绝提供服务,比如:没有权限访问相关资源 |
404 | Not Found | 请求资源不存在,一般是URL输入有误,或者网站资源被删除了 |
428 | Precondition Required | 服务器要求有条件的请求,告诉客户端要想访问该资源,必须携带特定的请求头 |
429 | Too Many Requests | 太多请求,可以限制客户端请求某个资源的数量,配合 Retry-After(多长时间后可以请求)响应头一起使用 |
431 | Request Header Fields Too Large | 请求头太大,服务器不愿意处理请求,因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。 |
405 | Method Not Allowed | 请求方式有误,比如应该用GET请求方式的资源,用了POST |
500 | Internal Server Error | 服务器发生不可预期的错误。服务器出异常了,赶紧看日志去吧 |
503 | Service Unavailable | 服务器尚未准备好处理请求,服务器刚刚启动,还未初始化好 |
511 | Network Authentication Required | 客户端需要进行身份验证才能获得网络访问权限 |
Ajax请求
基本操作
1 | // 1.创建对象 |
readystate值 | 状态 | 描述 |
---|---|---|
0 | UNSENT | 代理被创建,但尚未调用 open() 方法。 |
1 | OPENED | open() 方法已经被调用。 |
2 | HEADERS_RECEIVED | send() 方法已经被调用,并且头部和状态已经可获得。 |
3 | LOADING | 下载中;responseText 属性已经包含部分数据。 |
4 | DONE | 下载操作已完成。 |
设置请求参数
在地址后加请求参数
1 | xhr.open("GET","http://127.0.0.1:8080/login?user=123456&passwd=123456"); |
发送POST请求
修改请求方式
1 | // 1.创建对象 |
设置POST请求参数 (请求体设置)
1 | xhr.send("user=123456&passwd=123456"); |
设置请求头信息
1 | // 发送 |
设置响应体数据的类型
1 | // 设置响应体数据的类型 |
请求超时处理
1 | // 超时 2s 设置 |
网络异常处理
1 | // 网络异常回调 |
取消请求
1 | // 取消请求 |
jQuery中的Ajax
引入jQuery
下载jQuery并引入。
1 | <head> |
通过百度 CDN引入
1 | <head> |
发送请求
-
GET
1 | // 地址-请求参数-响应回调-响应体数据类型 |
-
POST
1 | // 地址-请求参数-响应回调-响应体数据类型 |
通用方法发送Ajax请求
1 | $.ajax({ |
请求配置
键值对描述
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contents | 字符串/正则表达式对的对象,用于确定 jQuery 在给定其内容类型的情况下如何解析响应。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:“application/x-www-form-urlencoded”。 |
context | 为所有 AJAX 相关的回调函数规定 “this” 值。 |
converters | 包含数据类型到数据类型转换器的对象。每个转换器的值都是一个函数,用于返回响应的转换值。 默认:{“* text”: window.String, “text html”: true, “text json”: jQuery.parseJSON, “text xml”: jQuery.parseXML} |
crossDomain | 如果要在同一域上强制跨域请求(如 JSONP),请将跨域的值设置为 。例如,这允许服务器端重定向到另一个域。默认:false for same-domain requests, true for cross-domain requests |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
headers | 其他标头键/值对的对象,要与使用 XMLHttpRequest 传输的请求一起发送。始终添加标头,但可以在此处更改其默认值。还可以从函数内部覆盖设置中的值。默认:{} |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
isLocal | 允许将当前环境识别为“本地”(例如文件系统),即使 jQuery 默认不将其识别为“本地”。以下协议当前被识别为本地协议:、 和 。如果设置需要修改,建议在方法中修改一次。默认:depends on current location protocol |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
statusCode | 当响应具有相应代码时要调用的数字 HTTP 代码和函数的对象。如果请求成功,状态码函数采用与成功回调相同的参数;例如statusCode: {404: function() {alert( "page not found" );}} 如果它导致错误(包括 3xx 重定向),它们采用与回调相同的参数。error |
success(result,status,xhr) | 当请求成功时运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
axios中的Ajax
引入axios
1 | // cdn |
发送请求
-
GET
1 | axios.get('http://127.0.0.1:8080/login',{ |
-
POST
1 | axios.post('http://127.0.0.1:8080/login', |
通用方法发送Ajax请求
1 | axios({ |
请求配置
请求配置
1 | { |
响应结构和处理
1 | { |
使用 then 时,你将接收下面这样的响应 :
1 | axios.get('/login') |
跨域
同源策略
同源策略是一个重要的安全策略,它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。
它能帮助阻隔恶意文档,减少可能被攻击的媒介。
JSONP方案
通过网页中的一些标签,如 img、iframe、script来解决。
1 | <script src="http://127.0.0.1/data"></script> |
CORS方案
跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其他源(域、协议或端口),使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中,浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。
1 | // 设置响应头 |