ajax请求出错_学习笔记：Ajax总结

以下内容均为个人学习过程的总结记录，如有错误，望各位大佬指正~

是什么

Asynchronous JavaScript And XML，异步JS和XML：在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术（在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理）

为什么用

优点

异步模式，提升用户体验
优化浏览器及服务器之间的传输，减少不必要的数据往返，减少带宽占用
AJax引擎在客户端运行，承担了部分本来由服务器承担的工作，从而减少大用户量下的服务器负载

缺点

不支持浏览器back按钮
安全问题：暴露了与服务器交互的细节
对搜索引擎的支持比较弱
破坏了程序的异常机制
不易调试

如何用（原生）

内容改变
某异步函数被调用

1、AJAX XHR

XMLHttpRequest对象：用于后台与服务器交换数据，使之可用JS向服务器发起请求并处理响应而不阻塞用户，进行页面的局部更新

创建XHR对象

var xmlhttp;
if (window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();
}
else{xmlhttp = new ActiveObject('Microsoft.XMLHTTP')
}

2、向服务器发送请求

xmlhttp.open('GET', 'test1.txt', true);
// true表示异步，请求类型为get，文件在服务器上的位置为test1.txt
xmlhttp.send();
//send(string)仅用于post请求

请求方式的选择

使用post的情况

可设置请求头，规定请求数据类型，比get更安全；传输文件体积无限制；常用于上传数据

无法使用缓存文件（更新服务器上的文件或数据）
向服务器发送大量数据（post没有限制）
发送包含未知字符的用户输入，post比get更稳定也更可靠
像表单一样post数据：使用setRequestHeader()来添加HTTP头，然后在send方法中发送数据(请求体)
xmlhttp.open('post', 'ajax_test.asp', 'true');
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send('fname=Bill&name=Gates');

使用get

通过URL传递参数，相对不安全，但传输速度快；传输文件小；常用于获取数据

为避免得到缓存的结果，可向URL中添加一个唯一的ID
xmlhttp.open('get', 'demo_get.asp?t=' + Math.random(), true);
xmlhttp.send();
通过get方法发送信息，可向URL添加信息
xmlhttp.open('get', 'demo_get2.asp?fname=Bill&name=Gates', true);
xmlhttp.send();

使用delete

使用put

3、服务器响应

获取来自服务器的响应：使用XHR对象的responseText或responseXML属性

responseTest：字符串响应
responseXML：XML响应

4、响应就绪，执行函数

onreadystatechange事件

每当readyState改变时，就会触发onreadystatechange事件。onreadystatechange储存函数，每当readyState属性改变时调用；readyState储存XHR的状态；

0：请求未初始化
1：请求连接已建立
2：请求已接受
3：请求处理中
4：请求已完成，响应就绪

status

200：OK
404：未找到页面

status：HTTP状态码

1xx（临时响应）：表示临时响应并需要请求者继续执行操作
2xx（成功）：表示成果处理了请求
3xx（重定向）：表示要完成请求需要进一步操作，通常用于重定向
4xx（请求错误）：表示可能出错，妨碍了服务器的处理
5xx（服务器错误）：表示服务器在尝试处理请求时发生内部错误，这些错误可能是服务器本身的错误，而不是请求出错

响应就绪

当async=true时，应在响应处于onreadystatechange事件中的就绪状态时执行函数

xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4 && xmlhttp.status == 200){documemt.getElementById('myDiv').innerHTML = xmlhttp.respenseText;}
}
xmlhttp.open('get', 'test1.txt', true);
xmlhttp.send();

当async=false时（同地），JS会等到服务器响应完毕再继续执行，若服务器繁忙或缓慢，应用程序会挂起或停止（此时无需编写onreadystatechange函数）

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

封装

function ajax(url, fnSucc, fnFail){var xmlhttp;if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else{xmlhttp = new ActiveObject('Microsoft.XMLHTP');}xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4 && xmlhttp.status == 200){fnSucc(xmlhttp.responseText)}else{if(fnFail){fnFail(xmlhttp.responseText)}}}xmlhttp.open('GET', url)xmlhttp.send()
}