1,AJAX对象
创建 AJAX对象的方法
- 所有的现代浏览器
- 所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象
- 创建方法:variable=new XMLHttpRequest();
- 老版本的 Internet Explorer (IE5 和 IE6)
- 使用 ActiveX 对象
- 创建方法:variable=new ActiveXObject("Microsoft.XMLHTTP");
-
var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
2,AJAX请求
- 1,AJAX的请求方法
- open(method,url,async):规定请求的类型、URL 以及是否异步处理请求
- setRequestHeader(header,value):post请求中,header: 规定头的名称,value: 规定头的值
- send(string):将请求发送到服务器,string只用于post请求
- 2,method:请求方式
- get请求:
- 简单,更快
-
xmlhttp=new XMLHttpRequest(); //get请求不带参数 xmlhttp.open("GET","/try/ajax/demo_get.php",true); //get请求带参数 xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true); xmlhttp.send();
- post请求:使用post请求的场景
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
-
//简单post:没有数据发送 xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send(); //复杂post:有数据发送 xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
- get请求:
- 3,url:文件在服务器上的位置
- 服务器上文件的地址
- 该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)
- 4,async:是否是异步
- true:异步
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
- false:同步
- JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止
- 当使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可
- true:异步
3,AJAX响应
响应返回数据的格式有两种:
- responseText :
- 获得字符串形式的响应数据。
-
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- responseXML:
- 获得 XML 形式的响应数据。
-
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt;