JavaScript的原生Ajax解析

经过JavaScript的Ajax进行详细的解析过程，从而更好的了解Jquery的Ajax。

顺带，我会在后面把我整理的一整套CSS3，PHP,MYSQL的开发的笔记打包放到百度云，有须要能够直接去百度云下载，这样之后大家开发就能够直接翻笔记不用百度搜那么麻烦了。

 笔记连接：http://pan.baidu.com/s/1qYdQdKK 密码：pvj2

 

1、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方式要编码encodeURI xmh.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 >