简介:AJAX是一种在无需加载网页的情况下,能够更新部分网页的技术。 AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)
传统的web交互模型,浏览器直接将请求发送给服务器,服务器回送响应,直接发送给浏览器, ajax交互模型,浏览器首先将请求发送ajax引擎(以xmlHttpResquest为核心),ajax在将请求发送给服务器,服务器回送响应先发给Ajax引擎,再由引擎传给浏览器显示。 1.同步交互模型:客户端提交请求,等待,在响应回到客户端前,客户端无法进行其他操作。 2.异步交互模型:客户端将请求提交给Ajax引擎,客户端可以继续操作,由Ajax引擎来完成与服务武器端通信,当响应回来后,Ajax引擎会更新客户页面,在客户端提交请求后,用户可以继续操作,而无需等待
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(Ajax引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎,用户操作起来也就感觉更加流畅了
前端代码实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>后台服务器代码
XMLHttpRequest是ajax的的基础。 现带的大多是浏览器都支持XMLHttpRequest对象。XMLHttpRequest用于在后台与服务器交换数据。
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();ajax发送请求的方式:
$.ajax({ url:"传给谁", data:(参数), type:"post/get", dateType:"html/text/json", success:function(data){ }, error:function(msg){ } });