原生AJAX--XMLHttpRequest对象
http://www.w3cfuns.com/forum.php?mod=viewthread&tid=1955&extra=page%3D1%26filter%3Dtypeid%26typeid%3D177%26typeid%3D177 w3cfun
JS跨域：http://www.cnblogs.com/2050/p/3191744.html
1、创建对象
1 var xmlhttp; 2 if (window.XMLHttpRequest) 3 {// code for IE7+, Firefox, Chrome, Opera, Safari 4 xmlhttp=new XMLHttpRequest(); 5 } 6 else 7 {// code for IE6, IE5 8 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 9 }
2、向服务器发送请求
使用XMLHTTPRequest对象的open()和send()方法。
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
例子：
open()得第三个参数用于设置是否为异步，true为异步。如果为false，则达不到异步效果。
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); //添加?后面的随机数是为了避免得到缓存结果
xmlhttp.send();
3、服务器响应
使用XMLHttpRequest对象的responseText（字符串类型的响应）或responseXML（XML类型的响应）属性。
xmlDoc=xmlhttp.responseXML;
4、readyState事件
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
onreadystatechange:存储函数， 当readyState属性改变时，会调用该函数
readyState:
0:请求未初始化
1：服务器连接已建立
2：请求已处理
3：请求处理中
4、请求已完成，且响应已就绪
status:
200: "OK"
404: 未找到页面
5、例子--根据输入框的输入显示提示
<html> <head> <script type="text/javascript"> var xmlHttp=null; function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } try {// Firefox, Opera 8.0+, Safari, IE7 xmlHttp=new XMLHttpRequest(); } catch(e) {// Old IE try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { alert ("Your browser does not support XMLHTTP!"); return; } } var url="/ajax/gethint.asp?q=" + str; url=url+"&sid="+Math.random(); xmlHttp.open("GET",url,false); xmlHttp.send(null); document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } </script> </head> <body><form> First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)"> </form><p>Suggestions: <span id="txtHint"></span></p> </body> </html>
JQuery--AJAX
1、$.ajax()
可以DIY一堆参数，是最全的一个ajax.可以不带参数直接使用。返回的是XMLHttpRequest对象。
例子：
$(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); $("#myDiv").html(htmlobj.responseText); }); });
2、$.post()
$.ajax({ type: 'POST', url: url, data: data, //规定连同请求发送到服务器的数据 success: success(data, textStatus, jqXHR), //用于定义callback function dataType: dataType //默认执行智能判断（xml、json、script 或 html） });
例子：
$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});