实际上,Ajax的初步写法很固定,需要修改的也只有:
- 连接服务器（准备发送数据）
- xhr.open('get|post',url,true|false);
- 获取数据方法格式：xhr.responseText
- xhr.responseXML
- 以及过程监控后的if语句成立后的内容
- xhr.onreadystatechange=function(){
- if(this.readyState==4 && this.status==200){
- xhr.onreadystatechange=function(){
如下面这菜鸟教程里的事例,事实上w3c里面也是这个.
<!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) //这个就是判断请求和相应是否成功!请求(发送)成功是4,相应(返回)成功是200.一般是固定的写法 { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //成功后就如此输出.(这部分才是需改动的部分) } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); //获取方式GET或POST,路经(本地的txt、php等文件或网址),以及异步或同步.(这部分也是改动的部分)(第三步)
xmlhttp.send(); //最后结尾的函数调用(第四步) } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>