深入理解ajax

发布时间：2020-12-16 03:00:09 所属栏目：百科来源：网络整理

导读：http://www.imooc.com/code/13468??? 基础练习 http://www.imooc.com/video/5644???????????? ！ajax！ ? ? ? ?常用?? for?? in循环?? ?for(var x in json) var json = JSON.parse(str);?????? // 把字符串解析成 JSON对象 var json = eval("(" + str + ")")

http://www.imooc.com/code/13468??? 基础练习

http://www.imooc.com/video/5644???????????? ！ajax！

?常用?? for?? in循环?? ?for(var x in json)

var json = JSON.parse(str);?????? //把字符串解析成 JSON对象

var json = eval("(" + str + ")");?? //把括号内字符当代码运行

var str1 = JSON.stringify(json);?? //将JSON转换成字符串

JSON.parse/eval():把它当成一段代码来看，来运行或者可以把字符串中的数组转换成真的数组；在要运行的东西里面加括号就会把它当成一个对象来看(在解析json时)? 例：eval("("+json+")");

ajax:读取服务器下的文件

乱码：由于html和文件编码不一致

作用：与服务器做交互 ???在不刷新界面的情况下更改页面内容

异步：ture? 全部刷新? 有缓存

同步: false? 一个一个刷新?? (默认)

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true

get：让数据在地址栏显示出来?? 不安全?? 数据量 2K???? 分享和调试时用get

post：不让数据显示出来?? 相对安全??? 数据量：基本无限制

*在IE下有时候会出现只有第一次读取的值正常，后面的值都不正常，是因为AJAX缓存的问题

解决方法如下：

1、在服务端加 header("Cache-Control: no-cache,must-revalidate");(如php中)

2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");

3、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache");

4、在 Ajax 的 URL 参数后加个随机数如 url=url+"&"+Math.random();

5、第五种方法和第四种类似，在 URL 参数后加上 "?timestamp=" + new Date().getTime();

6、用POST替代GET：不推荐

这样每次请求的url都不一样（ajax的缓存便不起作用）确保每次加载的数据是最新的。

AJAX

 1 function ajax(method,url,data,fn,fn2) {
 2 
 3     // 1 创建http请求对象
 4 
 5     var oAjax = null;
 6 
 7     if (window.XMLHttpRequest) {
 8 
 9         oAjax = new XMLHttpRequest();  //IE7+,Firefox,Chrome,Opera,Safari
10 
11     } else {
12 
13         oAjax = new ActiveXObject("Microsoft.XMLHTTP");  // IE6,IE5
14 
15     }
16 
17     // 2 连接服务器
18 
19     oAjax.open(method,url + "?" + data,true);
20 
21     // 3 发送
22 
23     if (method == "post") {
24 
25         oAjax.send(data);
26 
27     } else {
28 
29         oAjax.send();
30 
31     }
32 
33     // 4  处理响应结果
34 
35     oAjax.onreadystatechange = function () {
36 
37         // on readystate change 当 状态值 改变 的时候发生的事件
38 
39         if (oAjax.readyState == 4) {
40 
41        //readtState:Ajax的工作状态  有5个值（0初始化,1载入,2载入完成,3解析,4完 成）
42 
43             if (oAjax.status == 200) { //status：服务器状态  HTTP状态码
44 
45                 fn(oAjax.responseText);//请求成功函数
46 
47                 //responseText: ajax请求返回的值就存放到这个属性下面
48 
49 responseXML: 解析XML shi
50 
51             } else {
52 
53                 if (fn2) {//请求失败函数
54 
55                     fn2();
56 
57                 }
58 
59            }
60 
61         }
62 
63     }
64 
65 }

AJAX? 传网页中数据到后台?

防止用户重复提交

对于ajax请求时用户体验的改善， -loading

beforeSend()

Complete()

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!