想要学习的Ajax内容都在这个教程阮一峰javascript--XMLHttpRequest 对象
应该注意的点
用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行
<form action="xxx" method="POST">
<input type="text" name="password">
<input type="submit">
</form>使用form发送请求,查看请求的内容
password=123456就是POST请求的第四部分
那有没有什么方式可以实现
IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求(想用getpost都可以,想以什么形式展示就以什么形式展示)。
随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest(全局对象)，并被纳入 W3C 规范
XMLHttpRequest使得浏览器有了和软件一样的体验,不局限于看文章和刷新
Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML
2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是 通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就 成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说， 只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。
.
具体来说，AJAX 包括以下几个步骤。
- 创建 XMLHttpRequest 实例
- 发出 HTTP 请求
- 接收服务器传回的数据
- 更新网页数据
概括起来，就是一句话，**AJAX 通过原生的XMLHttpRequest对象发出 HTTP
请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON** 格式的数据，XML 格式已经过时了，但是 AJAX
这个名字已经成了一个通用名词，字面含义已经消失了。
所有代码都在这里
每一次大的更新可以查看commit
服务器端代码:
if(path === '/'){
response.statusCode = 200
let string = fs.readFileSync('./index.html')
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(string)
response.end()
}对于响应来说,第四部分始终都是字符串,因为response.write(string)返回的是字符串,我们给浏览器返回了符合html格式的字符串.
然后再设置响应头中的Content-Type,response.setHeader('Content-Type', 'text/html;charset=utf-8'),即要求浏览器以HTML的语法解析这段字符串!,所以我们可以设置浏览器使用的解析方法为json,也可设置为xml.所以JSON 是一门语言!!
http请求的路径都是绝对路径.所以都是以/开头
所有代码都在这里
查看commit既有每次迭代的代码
我们请求一个以xml格式解析的字符串,然后看看响应是什么
服务器端代码
else if (path === '/xxx') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/xml;charset=utf-8')
response.write(`
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
`)
response.end()
}main.js
let myButton = document.getElementById('myButton');
myButton.addEventListener("click",(e)=>{
let request = new XMLHttpRequest();
request.open('GET','/xxx')//配置request.参数分别为方法和路径
request.send();//发送请求
})index.html
<body>
<button id="myButton">点我</button>
<script src="main.js"></script>
</body>当点击点我按钮时,查看发送的请求和收到的响应:
我们将request打印出来,看看结构:console.log(request)
XMLHttpRequest.readyState
XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。
能够返回0,1,2,3,4,具体数字代表看上面的文档.
4，表示服务器返回的 数据已经完全接收，或者 本次接收已经失败。
通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。
var xhr = new XMLHttpRequest();
if (xhr.readyState === 4) {
// 请求结束，处理服务器返回的数据
} else {
// 显示提示“加载中……”
}上面代码中，xhr.readyState等于4时，表明脚本发出的 HTTP 请求已经成功。其他情况，都表示 HTTP 请求还在进行中。
下面我们从时间角度看看这个过程
当我们发送一个/xxx请求,使用的时间为9ms,9毫秒实际上很长,我们看一看在代码中9毫秒可以干什么
在控制台执行
console.time();
var a=1 ;
console.timeEnd();返回结果为default: 0.008056640625ms,声明一个变量只用了0.008ms
打印一句话只用了1ms
所以9ms对于浏览器来说,对于代码来说是很长的,可以做很多事情.
接下来看看readyState属性在一次请求中的变化过程
let request = new XMLHttpRequest();
request.open('GET','/xxx')
request.send();
setInterval(()=>{//在发送请求的过程中,每一毫秒问一下
console.log(request.readyState);
},1)结果为:
readyState在这个过程中从1变为4
readyState各个值的含义
刚刚只显示了1和4的原因是因为2,3太快,比一毫秒还快
01234这四个状态是逐个经过的
我们只需要记住4,4代表请求已经把响应下载完毕了
XMLHttpRequest.onreadystatechange = callback;
当 readyState 的值改变的时候，callback 函数会被调用。
例子:
var xhr= new XMLHttpRequest(),
method = "GET",
url = "https://developer.mozilla.org/";
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText)
}
}
xhr.send();XMLHttpRequest.DONE就是4
onreadystatechange测试
把监听函数往上写,这样就不会错过每一个readyState的变化
myButton.addEventListener("click",(e)=>{
let request = new XMLHttpRequest();
request.onreadystatechange = ()=>{//把监听函数往上写,这样就不会错过每一个readyState的变化
console.log(request.readyState);
}
request.open('GET','/xxx')//配置request.参数分别为方法和路径
request.send();//发送请求
// console.log(request)
})打印结果为1,2,3,4
4代表请求已经把响应下载完毕了,但是请求成功和失败还要看status状态码是大于200小于300还是大于400
request.onreadystatechange = ()=>{
if(request.readyState ===4){
console.log("请求和响应都完毕了");
if ( request.status>=200&&request.status<=400){
console.log('说明请求成功');
console.log(request.responseText);//打印响应的第四部分,字符串
}else if(request.status>=400){
console.log("响应失败");
}
}
}
但是xml结构不方便,需要使用DOMapi去获取数据.现在使用json
什么是json:
json是一门数据格式化语言,用来表示数据
https://www.json.org/
轨道图
js与json的区别:
以下都是合法的json语法:
"hi"null["a","b"]{"name":"马涛涛","isBoy":true}
下面不符合!{'x':"y"}
必须双引号
接下来我们返回一个符合json语法的字符串
else if (path === '/xxx') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/xml;charset=utf-8')
response.write(`
{
"note":{
"from":"mataotao",
"to":"ni",
"bool":true,
"arr":["a",1,2,3],
"num":3
}
}
`)
response.end()使用window.JSON这个API,把符合json语法的字符串转化为js对应的值
这个API就像window.document.getElementById一样,是浏览器提供的api
修改一下main.js将json转化为
if ( request.status>=200&&request.status<=400){
console.log('说明请求成功');
console.log(request.responseText);
console.log( typeof request.responseText);//string
let string = request.responseText;
//把符合json语法的字符串转化为js对应的值
let object2 = window.JSON.parse(string);
console.log( typeof object2)
console.log(object2)
}这样我们就可以用object.note.from取到"mataotao"这个字符串
http响应第四部分永远是字符串,知识写的这个字符串刚好符合json对象的语法
一般面试大概率会问这个问题,写不对一定过不了面试
下面四句代码一定要记住:
myButton.addEventListener("click",(e)=>{
//这四句一定要记住
let request = new XMLHttpRequest();
request.onreadystatechange = ()=>{
if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
console.log(request.responseText)
}
}
request.open('GET','/xxx')//配置request.参数分别为方法和路径
request.send();//发送请求
//这四句一定要记住
})