原生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); });