[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]]])

method: 定义请求的类型,"get","post"大小写均可

url:定义请求的url地址

async: 定义是否异步处理请求.true:异步;false:同步,不指定时,默认情况下是true

username,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报文首部
知识都是相通的,想分享的内容大概就是这么多了,感谢您的阅读~

[Ajax]Ajax基础知识简单介绍

猜你喜欢