[Ajax]Ajax基础知识简单介绍
Ajax:Asynchronous Javascript And XML（异步 JavaScript 和 XML）.不是新的编程语言，而是一种用于创建快速动态网页的技术.所以,如果你想要研究Ajax,那么你要对JavaScript和XML有所了解:【XML】快速了解XML
【JS】JS知识小结
| 同步异步 |
在开始Ajax之前,咱们先来聊聊同步(Synchronous)与异步(Asynchronous).
- 同步是指一旦开始,调用者必须等到方法调用返回后,才能继续后续的行为
- 异步是说,当我调用一个方法时,不必等方法调用返回,可以继续后续的操作
| XMLHttpRequest |
XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据。 所以,接下来说说,如何使用这个API
使用Ajax的过程可以类比平常我们访问网页过程:
//1.创建一个XMLHttpRequest类型的对象--相当于打开了一个浏览器
var xhr=new XMLHttpRequest();
//2.打开与一个网址之间的连接--相当于在地址栏输入访问地址
xhr.open('GET','网址地址');
//3.通过连接发送一次请求--相当于回车或者点击访问发送请求
xhr.send(null);
//4.指定xhr状态变化事件处理函数--相当于处理网页呈现后的操作
xhr.onreadystatechange=function(){
//通过xhr的readyState判断此次请求的响应是否接收完成
if(this.readyState==4){
//通过xhr的responseText获取到响应的响应体
console.log(this);
}
}
本质上XMLHttpRequest就是JavaScript在Web平台中发送HTTP请求的手段,所以我们发送出去的请求仍然是HTTP请求,同样符合HTTP约定的格式:
//设置请求报文的请求行
xhr.open('GET','./time.php')
//设置请求头
xhr.setRequestHeader('Accept','text/plain')
//设置请求体
xhr.send(null)
xhr.onreadystatechange=function(){
if(this.readyState==4){
//获取响应状态码
console.log(this.status)
//获取响应状态描述
console.log(this.statusText)
//获取响应头信息
console.log(this.getResponseHeader('Content-Type'))//指定响应头
console.log(this.getAllResponseHeaders()) //全部响应头
//获取响应体
console.log(this.responseText) //文本形式
}
}
其中, open方法用户创建HTTP请求，但是请求并未发送，其定义如下：
open(method,url[,async=true[,username=null [,password=null]]])
| 扩展:跨域请求 |
这一部分内容和Ajax没多大关系,但是也有些关系.既然涉及到了,就来说说.
同源策略是浏览器的一种安全策略,所谓同源是指域名,协议,端口完全相同,默认只有同源的地址才可以相互通过Ajax的方式请求.
同源或者不同源说的是两个地址之间的关系,不同源地址之间请求,称之为跨域请求.
那么,当我想要发送跨域请求时,该怎么做呢?
1.通过img可以发送不同源地址之间的请求,无法拿到响应结果:
var img=new Image();
img.src='http://locally.lala.com/categories';
2.通过link可以发送不同源地址之间的请求,无法拿到响应结果
var link=document.createElement('link');
link.rel='stylesheet';
link.href='http://locally.lala.com/categories';
3.通过script可以发送不同源地址之间的请求,无法拿到响应结果
var script=document.createElement('script');
script.src='http://locally.lala.com/categories';
因为拿不到响应结果,所以有了跨域资源共享(CORS:Cross Origin Resource Share),只需要在服务端响应的时候,添加一个"Access-Control-Allow-Origin"的响应头,表示这个资源是否允许指定跨域请求,即可.
看到这儿,想起了HTTP报文首部的一些内容了,不知道你有没有想起来:【HTTP】HTTP报文首部
知识都是相通的,想分享的内容大概就是这么多了,感谢您的阅读~
