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

野性酷女 2022-04-16 01:23 316阅读 0赞

Ajax:Asynchronous Javascript And XML（异步 JavaScript 和 XML）.不是新的编程语言，而是一种用于创建快速动态网页的技术.所以,如果你想要研究Ajax,那么你要对JavaScript和XML有所了解:[【XML】快速了解XML][XML_XML]  
[【JS】JS知识小结][JS_JS]

在开始Ajax之前,咱们先来聊聊同步(Synchronous)与异步(Asynchronous).

*  同步与异步通常用来形容一次方法调用,强调消息通信机制  
    
    
     *  同步是指一旦开始,调用者必须等到方法调用返回后,才能继续后续的行为 
     *  异步是说,当我调用一个方法时,不必等方法调用返回,可以继续后续的操作
 *  是不是觉得与咱们平时理解的同步与异步有些不一样?那是因为同步与异步是从国外翻译过来的,有些不同,有些在所难免,建议去看看英文中是如何描述的 
    
    <table> 
     <tbody> 
      <tr> 
       <td><font>XMLHttpRequest </font></td> 
      </tr> 
     </tbody> 
    </table>
    
     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
 *  <table> 
     <tbody> 
      <tr> 
       <td><font>扩展:跨域请求</font></td> 
      </tr> 
     </tbody> 
    </table>
    
    这一部分内容和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报文首部][HTTP_HTTP]  
    知识都是相通的,想分享的内容大概就是这么多了,感谢您的阅读~

[XML_XML]: https://blog.csdn.net/zll_0405/article/details/82950037
[JS_JS]: https://blog.csdn.net/zll_0405/article/details/83309582
[HTTP_HTTP]: https://blog.csdn.net/zll_0405/article/details/82980161