![0dbe535aec8ee3e797224b5cb6c0fcf8.png](https://i-blog.csdnimg.cn/blog_migrate/ffa2692443bf412d868edd2031f5ab21.jpeg)
ajax准备
ajax需要创建一个XMLHttpRequest
对象,具体调用方法为new XMLHttpRequest()
但是值得一提的是:在ie7以上的版本,有以上方法,到了ie7以下,想要一个xmlhttprequest对象需要new ActiveXObject()
判断方法为:
var xhr;
if (window.XMLHttpRequest) {
//ie7+执行代码
xhr = new XMLHttpRequest();
} else {
//ie7以下执行代码
xhr = new ActiveXObject();
}
ajax读取
想要通过ajax读取数据,就需要使用xhr.open(method(请求的类型),url(文件的路径),async(同步或异步));
一般我们的写法是xhr.open("GET","URL",true)
以上为异步读取一个文件的内容。
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
如果想要前台的表单传到后台,可以使用POST
例子:
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");
setRequestHeader(header,value)
方法的参数:header: 规定头的名称 value: 规定头的值
异步还是同步?
我建议你使用异步,同步可以在小范围的数据中使用,一旦服务器繁忙就会被这个同步给害死。
ajax获取响应内容
ajax的主要作用就是动态更改某一部分的内容,所以需要获取响应的内容
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
如果你想要获取一个txt文件中的内容你可以这么写:
var xhr;
if (window.XMLHttpRequest) {
//ie7+
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject();
}
xhr.open("GET" , "ajax-info.txt" , true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("yourID").innerHTML = xhr.responseText;
}
}
首先xhr.open()请求,xhr.send(string)发送请求参数为url传递的参数,仅用于POST。
xhr的readyState有5个值:
- 0:请求未初始化
- 1:服务器连接已建立
- 2:请求已接收
- 3:请求处理中
- 4:请求已完成,有响应
当xhr的readyState发生改变的时候,就会触发onreadystatechange,所以需要这么写xhr.onreadystatechange = function(){}
xhr的status有2个值:
- 200:成功访问
- 404:找不到资源
所以我们要想得到正确的资源就需要请求完成并且可以访问的情况下取值,也就是xhr.readyState==4 && xhr.status==200的情况下才可取值。