ajax

来源：互联网发布：金融学中的优化方法编辑：程序博客网时间：2024/06/04 19:28

1.原生ajax

创建一个xhr对象，readystate onload send open

2.处理各种请求方式、头信息、跨域、进度、防止连续重复请求、封装成promise、jsonp、数据编码、文件上传等等

3.readyStae状态

在《Pragmatic Ajax A Web 2.0 Primer 》中偶然看到对readyStae状态的介绍，感觉这个介绍很实在，摘译如下：

0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了

4.由于在各个浏览器的XmlHttpRequest创建方式不一样

5.原生ajax编写

var xmlHttpRequest = null;function ajaxRequest() {

if (window.ActiveXObject) {

xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }

else if (window.XMLHttpRequest) {

xmlHttpRequest = new XMLHttpRequest(); }

if (null != xmlHttpRequest) {

var v1 = document.getElementById("value1").value;

var v2 = document.getElementById("value2").value; //xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true);

xmlHttpRequest.open("POST", "AjaxServlet", true); // 当发生状态变化时就调用这个回调函数

xmlHttpRequest.onreadystatechange = ajaxCallBack; // 使用post提交时必须加上下面这行代码

xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 向服务器发出一个请求

xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2); }}

function ajaxCallBack() { if (xmlHttpRequest.readyState == 4) { if (xmlHttpRequest.status == 200) { var content = xmlHttpRequest.responseText; document.getElementById("div1").innerHTML = content; } }}

6.jquery ajax

$.ajax({

type: 'POST',

url: url ,

data: data ,

success: success ,

dataType: dataType

});

0 0