如何发送请求以及AJAX
AJAX(async JavaScript and XML),指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。后来,AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。
如何发请求?
浏览器与服务器之间,采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏览器就会向服务器发出 HTTP 请求。
我们还可以通过一些其他方式发送请求。
<form>
标签
用 form
可以发请求,但是会刷新页面或新开页面
<form action="x" method=post><input type="username" name="username"><input type="submit">
</form>
复制代码
当点击提交按钮后,会发出一个post
的请求(在form
里的method
里面设置请求类型)。
在图片中可以看到发出了一个路径为x
的post
请求(路径设置在form
的action
里),请求的内容为username=123
,(usernam
在第一个input
标签的name
里设置,后面的类容是输入框中的内容)。
<a>标签
用 a
可以发 get
请求,但是也会刷新页面或新开页面
<a href="x">点击</a>
复制代码
当点击按钮之后,会发出一个get
请求。
<img>标签
用 img
可以发 get
请求,但是只能以图片的形式展示
<script>var image = document.createElement('img')image.src = '/x'document.body.appendChild(image)
</script>
复制代码
当定义一个img
标签,设置了src
路径之后,就会发出一个get
请求。当在页面中引入这个img
标签之后,只能以图片的形式展示
<link>标签
用 link
可以发 get
请求,但是只能以 CSS
、favicon
的形式展示
<script>var link = document.createElement('link')link.rel = 'stylesheet'link.href = '/x'document.head.appendChild(link)
</script>
复制代码
link
标签只有定义了并引入到页面中之后,才会发出请求,(img
标签只要定义之后就可以发请求)
<script>标签
用 script
可以发 get
请求,但是只能以脚本的形式运行
<script>var script = document.createElement('script')script.src = '/x'document.head.appendChild(script)
</script>
复制代码
当定义一个script
标签并引入页面之后,就会发出一个get
请求
进阶
有没有什么方式可以实现
get
、post
、put
、delete
请求都行- 想以什么形式展示就以什么形式展示
AJAX
利用 AJAX 可以发出 HTTP 请求,得到服务器返回的数据后,再进行处理。虽然 AJAX 的 X 代表着 XML ,但是目前服务器返回的都是 JSON 格式的数据,AJAX 字面的含义已经消失了,已经成为了一个通用名词。
具体来说,AJAX 包括以下几个步骤。
- 创建
XMLHttpRequest
实例 - 发出
HTTP
请求 - 接收服务器传回的数据
- 更新网页数据
一个AJAX请求
button.addEventListener("click", e => {let request = new XMLHttpRequest();request.open("GET", "/yyzcl"); //配置requestrequest.setHeader("yyzcl","OK"); //设置请求头request.send("Yyzcl");request.onreadystatechange = () => {if (request.readyState === 4) {let string = request.responseText; // 获取服务器的返回值,是一个字符串let obj = window.JSON.parse(string); // 把符合JSON语法的字符串转换为JS对应的值(可以是对象,字符串等)}};
});
复制代码
- 配置request
open
是用来配置request
的,其一共可以传递5个参数,来看看 MDN 的解释。
void open(DOMString method,DOMString url,optional boolean async,optional DOMString user,optional DOMString password
);
复制代码
第一个参数是请求方式,第二个参数是请求地址,后面的参数一般不改,使用默认设置,所以一般只设置两个参数。
- 请求状态
readyState
表示请求的状态,其一共有5种状态。
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT (未打开) | open()方法还未被调用. |
1 | OPENED (未发送) | open()方法已经被调用. |
2 | HEADERS_RECEIVED (已获取响应头) | send()方法已经被调用, 响应头和响应状态已经返回. |
3 | LOADING (正在下载响应体) | 响应体下载中; responseText中已经获取了部分数据. |
4 | DONE (请求完成) | 整个请求过程已经完毕. |
从第二个值可以得到一个额外信息,客户端是分段下载响应体的。
请求头
setHeader
是用来设置请求头的,以key:value
的格式设置。请求体
send
是用来设置请求体的,是一个字符串的形式。
AJAX解析
来看看之前那个 AJAX 请求。
button.addEventListener("click", e => {let request = new XMLHttpRequest();request.open("GET", "/yyzcl");request.setHeader("yyzcl","OK");request.send("Yyzcl");request.onreadystatechange = () => {if (request.readyState === 4) {let string = request.responseText;let obj = window.JSON.parse(string);}};
});
复制代码
open
是用来设置 HTTP 请求的第一部分的setHeader
是用来设置请求头的第二部分的,第二部分有些信息是浏览器自动设置的send
是用来设置请求头的第四部分的,get
请求也可设置第四部分,不报错,但不起作用
响应体解析
request.status
、request.statusText
是响应体的第一部分
request.getAllResponseHeaders()
或者request.getResponseHeader()
是响应体的第二部分
request.responseText
是响应体的第四部分
AJAX的同源政策
AJAX 只能向同源网址(协议、域名、端口都相同)发出 HTTP 请求,如果发出跨域请求,就会报错
比如:
https://www.github.com
不能向http://www.github.com
发送 AJAX 请求
http://github.com
不能向http://www.github.com
发送 AJAX 请求
http://www.github.com:80
不能向http://www.github.com:81
发送 AJAX 请求
CORS
CORS 是一个 W3C 标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest
请求,从而克服了 AJAX 只能同源使用的限制。
如果 A 想利用JavaScript
向 B 网站发送 AJAX 请求,那么只需要在 B 的后端写上: response.setHeader('Access-Control-Allow-Origin',' A 网站的 **协议** + **域名** + **端口号**')
就可以实现 AJAX 的跨域请求。
JSON
JSON(JavaScript Object Notation)是一种由道格拉斯·克罗克福特构想和设计、轻量级的数据交换语言,JSON 是 JavaScript 的一个子集,但 JSON 是独立于语言的文本格式,并且采用了类似于C语言家族的一些习惯。
JSON
的数据格式有string
、number
、object
、array
、true
、false
、null
,和 JavaScript 还是有一些区别的。
JavaScript | JSON |
---|---|
undefined | 没有 |
null | null |
['A','B']/["A","B"] | ["A","B"] |
function fn(){} | 没有 |
{name: 'yyzcl'/"yyzcl"} | {"name": "yyzcl"} |
'yyzcl'/"yyzcl" | "yyzcl" |
var a={} | JSON没有变量 |
{proto} | JSON没有原型链 |
如何发送请求以及AJAX相关推荐
- ajax 直接向后台发送请求,通过ajax异步向后端发送请求,响应请求向前端传送json格式数据的实现思路...
一.前端异步请求代码: $.ajax ({ type: "POST",//请求的方式 url: "outputservlet3",//请求url data: { ...
- $.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
一.使用Ajax发送get请求 发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...
- 什么是Ajax?Ajax如何发送请求(详)
本篇来讲关于Ajax的内容,当然还有小伙伴可能不知道该怎么读 "Ajax",它读 "阿贾克斯" ,当然了读法可能因人而异,下面来进入正题,先来了解一下什么是Aj ...
- angular ajax get post 参数,AngularJS - $ http.post发送请求参数而不是JSON的任何方式?...
AngularJS - $ http.post发送请求参数而不是JSON的任何方式? 我有一些旧的代码通过jQuery的post方法发出一个AJAX POST请求,看起来像这样:$.post(&quo ...
- ajax向服务端发送请求验证用户名是否可用小示例
使用ajax向服务器发送请求 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 使用$.ajax向服务器发送请求
使用$.ajax向服务器发送请求 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- Ajax学习系列——向服务器发送请求
1.如何发送请求? 如果需要向服务器发送请求,我们使用的是XMLHttpRequest对象中的open()和send()方法. var xhr = new XMLHttpRequest();//具体创 ...
- 五、手动取消ajax请求 解决重复发送请求问题
server.js: // 1. 引入express const express = require('express')// 2. 创建应用对象 const app = express()// 3. ...
- JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据 最近写大创项目的时候,要做登录功能,考虑到之后还需要上传头像图片,因此决定使用FormData发送表单请求 ...
- 超级详细Ajax发送请求(接受提示信息或者返回参数)
Ajax 在网页开发中必不可少,经常遇到,这里我写一下开发过程中比较常用的技术. 开发重点注意: 1.用户体验 2.程序性能.安全.可维护性.等等 // 提交数据到后台处理 $.ajax({url: ...
最新文章
- K8s 文档增加反种族歧视声明 | 云原生生态周报 Vol. 54
- 字符串周期--hdu 3746 Cyclic Nacklace
- Android之网络请求通过协程+okhttp的没有做网络异常处理导致程序奔溃问题
- .Net WinForm 启用XP效果的问题
- mnist手写数字识别python_Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】...
- 计算机桌面变成立体,win7系统将桌面变成立体桌面的两种方法介绍
- 中国内地LCD液晶屏原材料仍正在发展中(二)
- 今日头条抖音小程序开发文档
- 安全管理实务之一:补丁管理(转)
- Python练习题——初学Python记录
- 置换 置换群 应用 +置换群对某些算法问题的解释
- 一键彻底关闭WIN10自动更新_BlockWin10AU
- 护眼灯对孩子眼睛好吗?盘点最好的儿童护眼灯品牌
- Python绘制GPS轨迹图
- 烦烦烦,天天这样的日子
- EZ 2018 05 06 NOIP2018 慈溪中学集训队互测(五)
- 2.文本预处理(分词,命名实体识别和词性标注,one-hot,word2vec,word embedding,文本数据分析,文本特征处理,文本数据增强)
- 珍爱网有人退费成功吗?珍爱网退费流程攻略详解大全!
- Python入门与各种系统安装部署应用
- LMT70温度传感器,stm32f4单片机