ajax原理总结附简单实例及其优点_AJAX相关教程-查字典教程网
ajax原理总结附简单实例及其优点
ajax原理总结附简单实例及其优点
发布时间:2016-12-29 来源:查字典编辑
摘要:在工作中用了AjaxN多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败!近有闲情,将之总结如下...

在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败!

近有闲情,将之总结如下:

【名称】

Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。

详情请移步Ajax: A New Approach to Web Applications

【原理】

简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面内的元素,从而达到改变页面内容的目的。

其中XmlHttpRequest对象是关键,因为它支持异步请求。XMLHttpRequest是完全用来向服务器发出一个请求的。它所包含的方法和属性如下所示:

方法:

abort() 导致当前正在请求被取消

getAllResponseHeaders() 返回一个字符串,包含氖 响应标头的名称和值

getResponseHeader(name) 返回指定的响应标头的值

open(method, url, async, username, password) 设置请求的方法和目标URL。请求可以声明为同步的(可选),也可以给需要基于窗口谁的请求而提供用户名和口令(可选)

send(content) 发起带有指定内容(可选)的请求

setRequestHeader(name, value) 利用指定的名称和值,设置一个请求标头

属性:

onreadystatechange 指派在请求的状态发生变化时所使用的事件处理程序

readyState 一个整数值,指示请求的状态如下:

0—-未初始化

1—-正在加载

2—-已加载

3—-交互

4—–完成

responseText 在响应里所返回的内容

responseXML 如果内容是XML,就根据内容而创建XML DOM

status 从服务器所返回的响应状态码。例如:200表示成功,404表示未找到,参考HTTP规范

statusText 响应所返回的状态文本消息

对于此对象其它介绍请移步:XMLHttpRequest概述

【所包含的技术】

· 基于XHTML和CSS标准的表示;

· 使用Document Object Model进行动态显示和交互;

· 使用XMLHttpRequest与服务器进行异步通信;

· 使用JavaScript绑定一切;

· 使用XML和XSLT;交换和操作数据。

以上的技术都是一些广泛使用了的技术,都属于比较旧的技术,ajax是这几种技术的结合体。

【简单实例】

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">

function ajax() {

var xmlHttp;

// 依据对象判断,而不是依据浏览器

if(window.XMLHttpRequest) {

xmlHttp=new XMLHttpRequest();//mozilla浏览器

}else if(window.ActiveXObject){

try{

xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP"); //IE老版本

}catch(e){}

try{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本

}catch(e){}

if(!xmlHttp){

window.alert("不能创建XMLHttpRequest对象实列");

return false;

}

}

if (!xmlHttp) {

alert("创建XMLHttpRequest对象失败!");

return false;

}

xmlHttp.open('POST', 'index.php?get_a=2&get_b=3', false);

xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8;');

xmlHttp.send("post_a=1&post_b=2");

xmlHttp.onreadystatechange = function() {

alert(xmlHttp.readyState);

}

if(xmlHttp.readyState == 4){ //判断对象状态

var content_obj = document.getElementById("content");

content_obj.innerHTML = "正在处理数据...";

if(xmlHttp.status == 200){ //信息已经成功返回,开始处理信息

var returnStr = xmlHttp.responseText;

content_obj.innerHTML = returnStr;

}else{ //页面不正常

content_obj.innerHTML = "您所请求的页面存在异常!";

}

}

}

</script>

</head>

<body>

<input type="button" value="ajax" />

<div id="content">ajax内容显示区</div>

</body>

</html>

切记:当发起一个POST请求时,需要对报头 Content-type(内容类型)进行设置。这样,服务器就知道如何来处理上传的内容。如果要模拟通过HTTP协议的POST方式来发送表单,则应将内容类型设置为application/x-www-form-urlencoded。

【优点】

页面无刷新,用户体验好;

异步,不打断用户操作,响应速度快;

“按需取数据”,减少冗余请求,减轻服务器负担;

基于标准化的并被广泛支持的技术,无需额外的插件;

可以使数据和表现分离;

【存在的问题】

一些设备还不支持

开发成本提高

使back按钮失效,用户操作后无法返回;

对流媒体支持没有flash之流好;

对搜索引擎不友好

破坏程序的异常机制

存在一些安全问题,暴露了一些程序接口和数据逻辑

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新AJAX相关学习
    热门AJAX相关学习
    编程开发子分类