Native Ajax parsing for JavaScript

Get a better understanding of jquery's Ajax with a detailed parsing process through JavaScript Ajax.

Incidentally, I will be in the back of the whole set of Css3,php,mysql development Notes pack to Baidu Cloud, there is a need to go directly to the Baidu cloud download, so that after you develop can directly turn the notes without Baidu search so troublesome.

Note Link: Http://pan.baidu.com/s/1qYdQdKK Password: pvj2

First, JavaScript native Ajax
1. Native Ajax Code:

12345678910111213141516171819202122232425262728293031323334353637383940

window.onload=function(){varoBtn = document.getElementById("btn");oBtn.onclick=function(){//打开浏览器/*1.创建一个ajax对象ie6以下 ActiveXObject(‘Microsoft.XMLHTTP‘)*/varxhr = null;// window属性下的XMLHttpRequest 是否存在 不存在就执行else 存在就直接执行，为的是兼容IE6/*  if(window.XMLHttpRequest){var xhr = new XMLHttpRequest();}else{var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);}*/// 最好用下面的方法考虑兼容try{// 代码尝试执行这个块中的内容，如果有错误，则执行catch{},并且传入错误信息varxhr = newXMLHttpRequest();}catch(e){varxhr = newActiveXObject(‘Microsoft.XMLHTTP‘);}// 在地址栏输入地址/*open()方法   */xhr.open(‘get‘,‘1.txt‘,true);// 提交xhr.send();// 等待服务器返回内容xhr.onreadystatechange = function(){if(xhr.readyState == 4){alert(xhr.responseText);}}}}

　　

Html:

1	<inputtype="button" value="按钮" id="btn">

　　

2. Forms
Forms: Submission of data
Action: The address of the data submission, which is the current page by default
Method: The way data is submitted, the default is Get mode

1.get
The data name and data value are connected by =, if there are multiple, then it will
Multiple data combinations connect with &, then put the data in the URL, then upload to the specified page

URL length limit reason, we can't pass too much data by get way

2.post
Theoretically unlimited

1234567

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 () method
Code: Xhr.open (' Get ', ' 1.txt ', true);
Parameters
1. Open mode
2. Address
3. Whether Async [true is asynchronous, false is synchronous]
Async: non-blocking [previous code does not affect subsequent code execution]
synchronization: Blocking [previous code will affect subsequent code execution]
Blocking:

12345678910

<script src="jquery.js"></script>$(function(){}) //如果Jque.js没有引用下面的文件执行也不得用，就阻塞了非阻塞：setTimeout(function(){alert(1);},2000);alert(2);// 弹出2不会对我有影响，就非阻塞

　　

Synchronous and Asynchronous differences:
When your subsequent code needs to use the previous things, you can use synchronous, but asynchronous use of many

4. Send () sends the request
Xhr.send ();

5. Request Status Monitoring

12345678910111213141516171819202122232425262728293031

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. Data request and Access source

123456789101112131415161718192021222324252627282930313233343536373839404142

window.onload=function(){varoBtn = document.getElementById("btn");// 用了setInterval()定时更新数据oBtn.onclick=setInterval(function(){// 打开浏览器，启用xml请求try{varxmh = newXMLHttpRequest();}catch(e){varxmh = newActiveXObject(‘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) 字符串转换为对象vardata = JSON.parse(xmh.responseText);varoUl = document.getElementById("ul1");varhtml = "";for(vari=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);}

　　

Background test.php file Code:

1234567891011121314

<?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格式echojson_encode($arr);？>

　　

7.get Method Parsing
/*
1. Cache connects a random number after the URL, timestamp
2. Garbled Code encodeURI
Output Chinese: +encodeuri (' Liu Wei ') +
*/
Enter an address in the address bar

1	xmh.open(‘get‘,‘getNews.php?username=‘+encodeURI(‘刘伟‘)+‘&pass=bbb&‘+newDate().getTime(),true);

Background PHP uses $_get['] method to get data

PHP Code:

123456

<?php$username= $_GET[‘username‘];$pass = $_GET[‘pass‘];echo"欢迎,你的名字:{$username},密码:{$pass}";？>

　　

8.post Method Parsing

12345678910

/*post方式，数据放在send()里面作为参数传递*/// 申明发生的数据编码类型xmh.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);// post没有缓存问题，get有缓存问题所以需要更新// 中文也不用编码 get方式要编码encodeURIxmh.send(‘username=leo&pass=222‘);

HTML section:

123456789101112131415161718192021222324252627282930

<li><div><imgsrc="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li><li><div><imgsrc="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li><li><div><imgsrc="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li><li><div><imgsrc="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li><li><div><imgsrc="images/1.png" alt="good"><p>森今夏浓浓的森女风来袭！柔软舒适的面料，柔和的粉蓝和白色，领口绑带，穿起来仙气十足！</p></div></li>

　　

Native Ajax parsing for JavaScript