您的位置:首页 > 其它

你真的完全理解ajax吗?

2019-06-14 23:25 246 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/weixin_43815756/article/details/92019394

首先,一句话了解ajax,就是用通过ajax做数据交互,既然我们了解了ajax的作用,下面我们通过来仔细了解ajax。
1.ajax原理:通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后通过JavaScript来操作数据,从而达到更新页面的效果。
简而言之:用于在后台与服务器交换数据,达到局部刷新的效果。

2.ajax的核心:XmlHttpRequest对象
3.ajax的加载特点:异步加载,局部刷新
ajax加载有两种:同步加载和异步加载
同步加载:一次执行一个,前一个没有一个执行完成,后一个不能开始
异步加载:一次执行一堆,前一个没有执行完成,后一个也能开始

4.ajax的好处:
①:最大的优点就是页面刷新,在页面与服务器通信时,用户体验会非常好,节约宽带
②:在使用异步操作时,具有更加迅速的响应能力,不需要打断用户操作

切记:涉及到ajax的访问时,千万不能使用文件协议的方式打开文件

下面是关于ajax的创建及访问。

//创建XmlHttpRequest对象--->相当于创建了一个http请求,主要用于和服务器交换数据
var xhr=new XMLHttpRequest();
//2.open(规定的请求类型get/post,URL,是否异步请求(默认是异步))-->相当于与服务器建立了特定端口的链接
xhr.open('get','./test.txt');
//3.将请求发送到服务器开始请求
//send(string--->只能在post方式请求的时候)
xhr.send();
//4.等待响应,需要事件机制去通知他
//这个事件只要状态该变了就会触发
xhr.onreadystatechange=function () {
console.log(this.readyState);//状态的数值:2,3,4
//判断响应已经就绪时,就可以拿到想要的数据
if(this.readyState!=4)return;
console.log(this.responseText);//拿到响应的文本
document.getElementsByTagName("body")[0].innerHTML=this.responseText;
}

今天就先分享下ajax的基本概念吧,后面继续分享关于ajax的知识点。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: