js是ajax,JS之Ajax

Asynchronous Javascript And XML (异步的JavaScript和XML)

由下列技术组合而成

1.使用CSS和XHTML来表示

2.使用DOM模型来交互和动态显示

3.数据互换和操作技术，使用XML与XSLT

4.使用XMLHttpRequest来和服务器进行异步通信

5.使用javascript来绑定和调用

传统Web应用程序 VS 采用AJAX技术的Web应用程序 主要差别：不是 JavaScript，不是 HTML/XHTML和 CSS，而是采用了 XMLHttpRequest 来向服务器异步的请求 XML 数据。

XMLHttpRequest对象的属性

XMLHttpRequest对象的方法

创建ajax的步骤

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。【原生创建ajax可分为以下四步,要记住】。

function ajax(url, success, fail){

// 1. 创建XMLHttpRequest对象，创建连接

var xhr = null;

xhr = new XMLHttpRequest()

// 2. 连接服务器

xhr.open("get",demo.php?name=tsrot&age=24,true);

//or xhr.open("POST",demo.php,true);

//第一个参数表示请求类型的字符串，其值可以是GET或者POST

// 3. 发送请求

xhr.send();

//一般情况下，使用Ajax提交的参数多是些简单的字符串，

//可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null或为空。

// 4. 处理响应

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){

if(xhr.status == 200){

success(xhr.responseText);

//responseText：获得字符串形式的响应数据,

//可用JSON.parse(xhr.responseText)转化为JSON对象

//responseXML: 获得 XML形式的响应数据

} else { // fail

fail && fail(xhr.status);

}

}

}

// readyState：ajax处理过程

// 0：请求未初始化(还没有调用 open())。

// 1：请求已经建立，但是还没有发送(还没有调用 send())。

// 2：请求已发送，正在处理中(通常现在可以从响应中获取内容头)。

// 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响

// 4：响应已完成；您可以获取并使用服务器的响应了。

// status属性：

// 200:"OK"

// 404: 未找到页面

}

复制代码谈谈JSONP

JSONP是怎么产生的？Ajax直接请求普通文件存在跨域无权限访问的问题，不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响，不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如< script >、< img >、< iframe >。因此，想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。JSON的纯字符数据格式可以简洁的描述复杂数据，JSON还被js原生支持。客户端在对JSON文件调用成功之后，也就获得了自己所需的数据。为了便于客户端使用数据，逐渐形成了一种【非正式传输协议】，人们把它称作【JSONP】，该协议的一个【要点】就是【允许用户传递一个callback参数给服务端】，然后服务端【返回数据】时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

一句话总结：作用：为了实现跨域请求，通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

简单例子

function jsonpCallback(result) {

console.log(result);

for(var i in result) {

console.log(i+":"+result[i]);

}

}

//callback参数指示生成JavaScript代码时要使用的函数jsonpcallback

//用XMLHttpRequest时，我们得到一个字符串,要用JSON.parse把字符串转化成对象。

//使用jsonp时，script标志会解析并执行返回的代码，等我们处理数据时，已经是一个JavaScript对象了

复制代码