简述ajax技术的含义,Ajax技术详解

Ajax技术：Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构，它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换，不会导致页面重载。Ajax的核心是JS的XMLHttpRequest构造函数，它定义了用脚本操纵HTTP的API。

XMLHttpRequest构造函数：每new一个XMLHttpRequest构造函数返回的对象都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。需要注意的是当你重用已存在的XMLHttpRequest，这将会终止之前通过该对象挂起的任何请求。

案例：创建一个HTTP API

//该构造函数返回的对象API能够操作HTTP请

var xhr = new XMLHttpRequest();

HTTP API的open()方法：创建了HTTP API后的下一步就是调用open()方法。这个方法有三个参数，参数一指定HTTP请求的方法，GET、POST、DELETE、HEAD、OPTIONS和PUT都能用。参数二指定了请求的URL，但URL不能是跨域的URL。参数三指定了这个请求是否异步进行，true表示异步，false表示同步。

案例：open()方法的调用

var xhr = new XMLHttpRequest();

var URL = "lookup.php?name=csh&sex=男&ie=utf-8";

xhr.open('GET', URL, true);

onreadystatechange事件：调用了open()方法后的下一步就是监听onreadystatechange事件，这个事件主要用于监听请求返回时的状态码(status属性)和返回数据的情况(readyState属性)。当status和readyState属性符合需求的时候调用回调函数。

readyState属性：readyState属性的值是一个整数，它指定了HTTP请求的状态。

0表示open()尚未调用

1表示open()已调用

2表示接收到头信息

3表示接收到响应主体

4表示响应完成

理论上，每次readyState属性改变都会触发readystatechange事件，但实际中当readyState改变为0或1时可能没有触发这个事件。当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发readystatechange事件。

status属性：readyState属性的值是一个整数，它指定了HTTP的状态码。

常见的HTTP状态码：

HTTP: Status 200 – 服务器成功返回网页

HTTP: Status 404 – 请求的网页不存在

HTTP: Status 503 – 服务不可用

案例：监听onreadystatechange事件

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function (){

//2xx状态与表示从缓存中直接取出的304可以看是成功的，IE(非原生的XHR对象)中会将204设置为1223，opera会在取得204时设置为0

if (xhr.readyState == 4 && ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0)){

options.callBack(converter[dataType].call(this, xhr.responseText, xhr.responseXML));

}

};

HTTP API的send()方法：这是HTTP请求的最后一步，调用这个方法把请求发送到服务器。send()有一个可选参数，GET请求的时候为null，POST请求的时候为传给后台的数据

案例：调用send()方法

var xhr = new XMLHttpRequest();

xhr.send(null);

HTTP API的setRequestHeader()方法：该方法用于设置HTTP头信息。而在POST请求时就必须要设置HTTP头信息的Content-Type属性，用于告诉服务器发送给它的数据的MIME类型。如果调用setRequestHeader()多次，新值不会取代之前旧的值，相反，HTTP请求将包含这个头的多个副本或这个头将指定多个值。

编码请求主体：HTTP POST请求包括一个请求主体，它包含客户端传递给服务器的数据，请求主体除了是简单的文本字符串之外，还可能是复杂的数据。在Ajax应用中，一般情况下发送到服务器的很可能是一个JS对象(即把数据存放到一个对象里面，直接把这个对象发送给服务器，也就是说这个对象就是请求主体)。

案例：使用JSON编码主体来发起HTTP POST请求

function postJSON(url, data, callback){

var request = new XMLHttpRequest();

request.open('POST', url); //对指定URL发送POST请求

request.onreadystatechange = function (){};

request.setRequestHeader("Content-Type", "application/json");

request.send(JSON.stringify(data));//data对象要转换为json类型

};

案例：发送一个GET请求

/**

* GET请求

* @param options  【该参数是一个object】

* {url: 'http://www.plateno.com/index.html, data: {name: 'luke'}, callBack: function(data){}}

*/

function get(options){

var xhr = new XMLHttpRequest(),

async = options.async || true;

try{

//判断是否传参数

var data = '', n = 0, a = '';

if (options.data){

data = '?';

for (var name in options.data){

n == 0 ? a = '' : a = '&';

n++;

data += a + name +'='+ encodeURI(options.data[name])

}

}

//判断是否缓存

var cache = '&' + new Data().getTime();

if (!options.cache){cache = '';}

xhr.open('get', options.url + data + cache, async); //设置请求数据

xhr.send(); //发送请求

//监听请求过程

xhr.onreadystatechange = function (){

//2xx状态与表示从缓存中直接取出的304可以看是成功的，IE(非原生的XHR对象)中会将204设置为1223，opera会在取得204时设置为0

if (xhr.readyState == 4 && ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0)){

options.callBack.call(this, xhr.responseText, xhr.responseXML);

}

}

}catch(e){throw new Error('GET请求失败');}

}

案例：发送一个POST请求

/**

* POST请求

* @param options  【该参数是一个object】

* {url: 'http://www.plateno.com/index.html', data:{name: 'luke'}, callBack: function(data){}}

*/

function post(options) {

var xhr = new XMLHttpRequest(),

async = options.async || true;

try{

//判断是否传参数

var data = '', n = 0, a = '';

if (options.data){

for (var name in options.data){

n == 0 ? a = '' : a = '&';

n++;

data += a + name +'='+ options.data[name]

}

}

xhr.open('post', options.url, async); //设置请求数据

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //设置请求头

xhr.send(data); //发送请求

//监听请求过程

xhr.onreadystatechange = function (){

//2xx状态与表示从缓存中直接取出的304可以看是成功的，IE(非原生的XHR对象)中会将204设置为1223，opera会在取得204时设置为0

if (xhr.readyState == 4 && ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0)){

options.callBack(converter[dataType].call(this, xhr.responseText, xhr.responseXML));

}

}

}catch(e){throw new Error('POST请求失败');}

}

14&period;javaweb AJAX技术详解

一.简介 1,  ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术 2,  核心:XMLHttpRequest对象.AJAX技术主要是通过此对象完成的 ...

&dollar;&period;ajax&lpar;&rpar;常用方法详解&lpar;推荐&rpar;

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数 ...

Comet技术详解：基于HTTP长连接的Web端实时通信技术

前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...

SSE技术详解：一种全新的HTML5服务器推送事件技术

前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...

触碰jQuery：AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

jQuery调用AJAX异步详解&lbrack;转&rsqb;

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

触碰jQuery：AJAX异步详解(转)

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

架构设计：远程调用服务架构设计及zookeeper技术详解(下篇)

一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

「视频直播技术详解」系列之七：直播云 SDK 性能测试模型

​关于直播的技术文章不少,成体系的不多.我们将用七篇文章,更系统化地介绍当下大热的视频直播各环节的关键技术,帮助视频直播创业者们更全面.深入地了解视频直播技术,更好地技术选型. 本系列文章大纲如下: ...

随机推荐

获取layer&period;open弹出层的返回值

正在开发的车联网项目用到了layer API.当我在开发“新建电子围栏”的时候需要弹出地图,用户在地图中画一个区域,最后将这个弹出层的数据返回给原页面.下面是我的实现过:程: 触发弹出层的代码: la ...

ACM&sol;ICPC 之 BFS&plus;状态压缩&lpar;POJ1324&lpar;ZOJ1361&rpar;&rpar;

求一条蛇到(1,1)的最短路长,题目不简单,状态较多,需要考虑状态压缩,ZOJ的数据似乎比POj弱一些 POJ1324(ZOJ1361)-Holedox Moving 题意:一条已知初始状态的蛇,求其 ...

window&period;parent与window&period;openner

window.parent与window.openner区别介绍 作者: 字体:[增加 减小] 类型:转载 今天总结一下js中几个对象的区别和用法,对这几个概念混淆的朋友可以看看 今天总结一下js中几 ...

DIV背景半透明文字不半透明的样式

DIV背景半透明,DIV中的字不半透明 代码如下: