1.原生js实现Ajax方法：
// 封装ajax()方法 function ajax(url,fnSucc,fnFaild){ //1、创建Ajax 对象 if(window.XMLHttpRequest) { var oAjax=new XMLHttpRequest(); //声明 兼容除IE6外 所有主流浏览器 } else { var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //声明 兼容IE6 内置的 微软的 插件 } //2、连接服务器(打开连接服务器) // open(method,url,async) // method ：请求的类型；GET 或 POST // url ：文件在服务器上的位置 // async ：true（异步）或 false（同步） oAjax.open('GET',url,true); //3、发送请求 oAjax.send(); //4、接受请求 oAjax.onreadystatechange=function (){ //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 /** readyState状态含义 * 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 */ if(oAjax.readyState==4){ /** status 状态含义 200: "OK" 成功 404: 未找到页面 出错 */ if (oAjax.status==200) { //alert('成功了！'+Ajax.readyState); //responseXML 获得 XML 形式的响应数据。 fnSucc(oAjax.responseText); //responseText 获得字符串形式的响应数据。 } else{ //alert('失败了'); if(fnFaild){ fnFaild } } } }; }
ajax(url,fnSucc,fnFaild)函数参数介绍：
url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名）
fnSucc:成功返回信息
fnFaild:失败返回信息
HTML页面使用方法 代码如下:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="ajax.js"></script> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { //阻止缓存方法：缓存是根据URL来存储的。只要url在变，就可以了。在路径那里加上get数据。getTime()是毫秒数 //第二种阻止缓存方法: 声明全部变量num = 0; 在路径后面加'aaa.txt?='+(num++) 递归 ajax('aaa.txt?t='+new Date().getTime(), function (str){ alert(str); }, function (){ alert('失败'); }); }; }; </script> </head> <body> <input id="btn1" type="button" value="读取" /> </body> </html>
2.jq方式实现Ajax方法：
$(document).ready(function(){ $("#search").click(function(){ $.ajax({ type: "GET", url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(), dataType: "json", success: function(data) { if (data.success) { $("#searchResult").html(data.msg); } else { $("#searchResult").html("出现错误：" + data.msg); } }, error: function(jqXHR){ alert("发生错误：" + jqXHR.status); }, }); }); $("#save").click(function(){ $.ajax({ type: "POST", url: "serverjson.php", data: { name: $("#staffName").val(), number: $("#staffNumber").val(), sex: $("#staffSex").val(), job: $("#staffJob").val() }, dataType: "json", success: function(data){ if (data.success) { $("#createResult").html(data.msg); } else { $("#createResult").html("出现错误：" + data.msg); } }, error: function(jqXHR){ alert("发生错误：" + jqXHR.status); }, }); }); });
注：
type：类型，“POST”或者“GET”，默认为“GET”
url：发送请求的地址
data：是一个对象连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据包含HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”
success：是一个方法，请求成功后的回掉函数。传入返回后的数据，以及包含成功代码的字符串
error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象