AJAX
传统的web交换缺点:
1.流量损失 2.浪费时间和带宽
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
概念: ajax使网页异步刷新,在不重新加载整个页面时,对网页的局部进行刷新。
特点: 局部刷新;
最大的特点:局部刷新
ajax的优点:
1.局部刷新;
2,。优化了浏览器与服务器之间的传输,减少了不必要的数据返回,减少了带宽占用;
3.ajax引擎在客户端进行,承担部分服务器的工作,减少了服务器端的压力;
ajax的缺点
1.ajax不支持浏览器back按钮。
2.安全问题 AJAX暴露了与服务器交互的细节。
3.对搜索引擎的支持比较弱。
4.破坏了程序的异常机制。
5.不易调试。
ajax的使用方法
XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。
1.实例化对象
var http=new XMLHttpRequest();
2.建立联系 open
open(method,url,async)
method:请求的类型;GET 或 POST
get(获取数据) post(新建 、增加数据) put(更新、 修改数据 、 删除数据)
url:文件在服务器上的位置(地址 : 远程 地址和 本地地址)
async:true(异步)或 false(同步) 默认为true , 异步; false 为同步。
?同步和异步的区别: 等待请求完成之后 在去执行 异步是:请求和后续代码同时执行
http.open("get","./list/data.txt");
3.向服务器发送请求 send(content )
这个方法里面的参数可写可不写 ,写了是服务器传输数据 ,不写是请求数据。
http.send();
send(string) 将请求发送到服务器。
string:仅用于 POST 请求
4.获取服务器响应的数据 ( 使用事件)
onreadystatechange
?responseText: 获得字符串形式的响应数据。
?response和responseText 的用法一样。
?readyState :存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
?status :
500 :服务器报错
200: “OK”
404: 未找到页面
http.onreadystatechange=function(){
/* console.log(http.response); //数据
console.log(http.readyState);*/ //读物的状态码 0 1 2 3 4
if(http.readyState==4){
var ajax1=JSON.parse (http.responseText); //json转化字符串
// var ajax1=JSON.parse (http.response); //json转化字符串
console.log(ajax1);
}
}
5.渲染界面
ajax 的异步和同步
?ajax同步 : 意味着此时请求服务器后,JS代码不再继续执行,等待服务器返回后才继续往下执行。
我的理解是一种线性执行的方式,执行的流程不能跨越。一般用于流程性比较强的程序,我们做的用户登录功能也是同步处理的,必须用户通过用户名和密码验证后才能进入系统的操作
?ajax异步 : 意味着此时请求服务器后,JS代码继续执行,不管服务器什么时候返回。
同步处理就是,说话后在吃饭,吃完饭后在看手机,必须等待上一件事完了,才执行后面的事情
比方说一个人边吃饭,边看手机,边说话,就是异步处理的方式。
异步的实现:使用回调函数callback()
什么是回调函数?
回调函数是另外某件事结束时执行的一个函数。在Ajax中,回调函
数就是服务器对一个请求对象作出响应时调用的函数。浏览器会在
某个时刻”回调”这个函数。
每次服务器响应请求时就会由浏览器调用回调函数,即使此时服务器并没有完全处理完请求。大多数服务器都会做多次响应,指示接收到请求,或者正在处理请求,或者已经处理完请求。
就是因为这个原因,这个请求属性才被命名为onreadystatechange
每次服务器响应一个请求时,它会把请求对象readyState属性设置为一个不同的值。所以我们要特别注意这个属性,来确定服务器何时处理完我们发送给它的请求。
readyState属性是什么?
答:这是一个数,指示服务器处理进行到哪个阶段。初始值为0,服务器处理完一个请求时,这个属性的值将是4.
为什么每一次都必须检查呢?
答:因为每次准备状态改变时浏览器都会运行回调函数。由于服务器接收到请求时会把这个值设置为1,而在处理请求时有可能把这个值设置为2或3,所以除非readyState等于4,否则无法确定服务器是否处理完请求。
那么status属性呢?
答:这是HTTP状态码,如404就代表禁止访问,200代表成功。对请求对象做任何处理之前一定要确保状态码为200。
异步的回调函数使用
var http =new XMLHttpRequest();
http.open("get","txt/ajax.txt",true);
http.send();
function showdata(callback){
http.onreadystatechange =function(){
if(http.readyState ==4 && http.status ==200){
callback (http.response);
}
}
}
showdata (function(data){
console.log(data);
})
ajax的同步
以下这个小例子只能输出2,看出了同步只能等待服务器执行后才能往下执行代码。
var http1=new XMLHttpRequest ();
http1.open("get","./txt/ajax.txt",false);
http1.send();
http1.onreadystatechange=function(){
if(http1.readyState==4 && http1.status==200){
console.log(1);
}
};
console.log(2);
更多推荐
JS中的ajax
发布评论