通过JavaScript的Ajax进行详细的解析过程，从而更好的了解Jquery的Ajax。
顺带，我会在后面把我整理的一整套CSS3，PHP,MYSQL的开发的笔记打包放到百度云，有需要可以直接去百度云下载，这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了。
笔记链接：http://pan.baidu.com/s/1qYdQdKK 密码：pvj2
一、JavaScript原生ajax
1.原生ajax代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
window.onload=function(){var oBtn = document.getElementById("btn");oBtn.onclick=function(){//打开浏览器/*1.创建一个ajax对象ie6以下 ActiveXObject('Microsoft.XMLHTTP')*/var xhr = null;// window属性下的XMLHttpRequest 是否存在 不存在就执行else 存在就直接执行，为的是兼容IE6/* if(window.XMLHttpRequest){var xhr = new XMLHttpRequest();}else{var xhr = new ActiveXObject('Microsoft.XMLHTTP');}*/// 最好用下面的方法考虑兼容try{// 代码尝试执行这个块中的内容，如果有错误，则执行catch{},并且传入错误信息var xhr = new XMLHttpRequest();}catch(e){var xhr = new ActiveXObject('Microsoft.XMLHTTP');}// 在地址栏输入地址/*open()方法 */xhr.open('get','1.txt',true);// 提交xhr.send();// 等待服务器返回内容xhr.onreadystatechange = function(){if(xhr.readyState == 4){alert(xhr.responseText);}}}} |
html:
| 1 | <input type="button" value="按钮" id="btn"> |
2.表单
表单:数据的提交
action : 数据提交的地址，默认是当前页面
method : 数据提交的方式，默认是get方式
1.get
把数据名称和数据值用=连接，如果有多个的话，那么它会把
多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面
url长度限制的原因，我们不能通过get方式传递过多的数据
2.post
理论上无限制
|
1
2
3
4
5
6
7
|
enctype : 提交的数据格式，默认application/x-www-form-urlencoded<form action="" method=""><input type="text" name="user"><input type="text" name="age"><input type="submit" value="提交"></form> |
3. open()方法
代码：xhr.open('get','1.txt',true);
参数
1.打开方式
2.地址
3.是否异步[true为异步，false为同步]
异步：非阻塞 [前面的代码不会影响后面的代码执行]
同步：阻塞 [前面的代码会影响后面的代码执行]
阻塞：
|
1
2
3
4
5
6
7
8
9
10
|
<script src="jquery.js"></script>$(function(){}) //如果Jque.js没有引用下面的文件执行也不得用，就阻塞了非阻塞：setTimeout(function(){alert(1);},2000);alert(2);// 弹出2不会对我有影响，就非阻塞 |
同步和异步区别：
当你后续的代码需要用到前面的东西的时候，你可以用同步，但异步用的多
4. send()发送请求
xhr.send();
5.请求状态监控
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
onreadystatechange事件・readyState属性：请求状态-0（初始化）还没有调用open()方法-1（载入）已调用send()方法，正在发送请求-2（载入完成）send()方法完成，已收到全部响应内容-3（解析）正在解析响应内容-4（完成）响应内容解析完成，可以在客户端用了・status属性：服务器（请求资源）的状态・返回的内容-responseText:返回以文本形式存放的内容-reponseXML:返回XML形式的内容代码分析：// 等待服务器返回内容/*readyState : ajax工作状态responseText : ajax请求返回的内容就被存在这个属性下面on readystate change : 当readyState改变的时候触发status : 服务器状态 http状态码*/xhr.onreadystatechange = function(){if(xhr.readyState == 4){// 状态值为200 ok的时候if(xhr.status == 200){alert(xhr.responseText);}else{alert('出错了，Err:'+xhr.status);}}} |
6.数据请求和获取源码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
window.onload=function(){var oBtn = document.getElementById("btn");// 用了setInterval()定时更新数据oBtn.onclick=setInterval(function(){// 打开浏览器，启用xml请求try{var xmh = new XMLHttpRequest();}catch(e){var xmh = new ActiveXObject('Microsoft.XMLHTTP');}// 在地址栏输入地址xmh.open('get','test.php',true);// 发送请求xmh.send();// 等待服务器返回内容xmh.onreadystatechange=function(){if(xmh.readyState == 4){// 以下是关键方法 JSON.parse();if(xmh.status == 200){// JSON.parse()将 JavaScript 对象表示法 (JSON) 字符串转换为对象var data = JSON.parse(xmh.responseText);var oUl = document.getElementById("ul1");var html = "";for(var i=0;i<data.length;i++){// 因为是二维数组所以需要这样写[i]['title']html += '<li><a href="">'+data[i]['title']+'</a> <span>'+data[i]['date']+'</span></li>'}oUl.innerHTML = html;}else{// 弹出status的状态错误alert("出错,Err:"+xmh.status);}// alert(xmh.responseText);}}},1000);} |
后台test.php文件代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?php// 用数组的格式传数据过去$arr = array(array('title'=>'菠萝的海df,很美','date'=>'2015-6'),array('title'=>'菠萝的海d,很美a','date'=>'2015-6'),array('title'=>'菠萝的海,很美s','date'=>'2015-6'),array('title'=>'菠萝的海d,很美s','date'=>'2015-6'),array('title'=>'的海x,很美x','date'=>'2015-6'),array('title'=>'菠萝海,很美','date'=>'2015-06'),array('title'=>'菠萝的海,很美s','date'=>'2015-6'));// json_encode 用来把数据转换成json格式echo json_encode($arr);？> |
7.get方法解析
/*
1.缓存 在url 后面连接一个随机数，时间戳
2.乱码 编码encodeURI
输出中文：+encodeURI('刘伟')+
*/
// 在地址栏输入地址
| 1 | xmh.open('get','getNews.php?username='+encodeURI('刘伟')+'&pass=bbb&'+new Date().getTime(),true); |
后台php用$_GET['']方法获取数据
php代码：
|
1
2
3
4
5
6
|
<?php$username = $_GET['username'];$pass = $_GET['pass'];echo "欢迎,你的名字:{$username},密码:{$pass}";？> |
8.post方法解析
|
1
2
3
4
5
6
7
8
9
10
|
/*post方式，数据放在send()里面作为参数传递*/// 申明发生的数据编码类型xmh.setRequestHeader('content-type','application/x-www-form-urlencoded');// post没有缓存问题，get有缓存问题所以需要更新// 中文也不用编码 get方式要编码encodeURIxmh.send('username=leo&pass=222'); |
HTML部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<li><div><img src="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li><li><div><img src="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li><li><div><img src="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li><li><div><img src="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li><li><div><img src="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li> |