在工作中用了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" onclick="ajax();" />

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

</body>

</html>

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

【优点】

页面无刷新，用户体验好； 
异步，不打断用户操作，响应速度快； 
“按需取数据”，减少冗余请求，减轻服务器负担； 
基于标准化的并被广泛支持的技术，无需额外的插件； 
可以使数据和表现分离； 
【存在的问题】 
一些设备还不支持 
开发成本提高 
使back按钮失效，用户操作后无法返回； 
对流媒体支持没有flash之流好； 
对搜索引擎不友好 
破坏程序的异常机制 
存在一些安全问题，暴露了一些程序接口和数据逻辑

ajax原理总结附简单实例及其优点的更多相关文章

  1. php分页原理教程及简单实例

    <?php //连接数据库 $con = mysql_connect("localhost","root",""); mysql_se ...

  2. C#开发Windows服务 附简单实例实现禁止QQ运行

    本实例主要实现下面三个基本功能 1.C#开发windows服务 2.禁止QQ等程序运行 3.为windows服务创建自动安装程序 下面针对这三个基本功能进行实现 一.C#开发windows服务 Win ...

  3. PHP Ajax简单实例

    最近学习Jquery Ajax部分,通过简单例子,比较了下post,get方法的不同 HTML部分 <html> <head> <title>jQuery Ajax ...

  4. Wordpress解析系列之PHP编写hook钩子原理简单实例

    Wordpress作为全球应用最广泛的个人博客建站工具,有很多的技术架构值得我们学习推敲.其中,最著名最经典的编码技术架构就是采用了hook的机制. hook翻译成中文是钩子的意思,单独看这个词我们难 ...

  5. Win Socket编程原理及简单实例

    [转]http://www.cnblogs.com/tornadomeet/archive/2012/04/11/2442140.html 使用Linux Socket做了小型的分布式,如Linux ...

  6. Ajax -- 原理及简单示例

    1. 什么是Ajax •Ajax被认为是(AsynchronousJavaScript and XML的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 2. Ajax ...

  7. Linux C Socket编程原理及简单实例

    部分转自:http://goodcandle.cnblogs.com/archive/2005/12/10/294652.aspx 1.   什么是TCP/IP.UDP? 2.   Socket在哪里 ...

  8. 什么是ajax，ajax原理是什么 ，优缺点是什么

    AJAX工作原理及其优缺点   1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页 ...

  9. 简述Ajax原理及实现步骤

    简述Ajax原理及实现步骤 1.Ajax简介 概念 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML). 现在允许浏览器与务器通信 ...

随机推荐

  1. [.ashx檔？泛型处理程序？]基础入门#5....ADO.NET 与 将DB里面的二进制图片还原 (范例下载 & 大型控件的ImageField)

    [.ashx檔?泛型处理程序?]基础入门#5....ADO.NET 与 将DB里面的二进制图片还原 (范例下载 & 大型控件的ImageField) http://www.dotblogs.c ...

  2. 仿SDWebImage

    仿SDWebImage 目标:模拟 SDWebImage 的实现 说明:整体代码与之前博客上的演练代码的基本一致,只是编写顺序会有变化! 在模仿 SDWebImage 之前,首先需要补充一个知识点:N ...

  3. 同时执行2个存储过程，2个SP中分别有相同的临时表名，会有冲突吗?

    同时执行2个存储过程,2个SP中分别有相同的临时表名,会有冲突吗?答案:不会 这就可以在以后写存储过程的时候统一临时表名了. alter procedure sp_01 as begin create ...

  4. eth0: error fetching interface information: Device not found

    转载,原文出处:http://zh888.blog.51cto.com/1684752/775447 亲测有效,感谢作者!!! ----------------------------分割线----- ...

  5. Hadoop和大数据：60款顶级大数据开源工具

    一.Hadoop相关工具 1. Hadoop Apache的Hadoop项目已几乎与大数据划上了等号.它不断壮大起来,已成为一个完整的生态系统,众多开源工具面向高度扩展的分布式计算. 支持的操作系统: ...

  6. Swift 类构造器的使用

    Swift 中构造器需要遵循的规则还是很多的, 总结一下, 有以下规则: 调用相关 指定构造器必须调用它直接父类的指定构造器方法. 便利构造器必须调用同一个类中定义的其它初始化方法. 便利构造器在最后 ...

  7. 【EF Code First】CodeFirst初始配置

    1,在Nuget管理中下载EntityFramework 2,配置文件中添加数据库配置 <connectionStrings> <add name="DefaultConn ...

  8. 解决vs2013不能添加控制器的步骤

    点击:vs2013 更新,更新完以后,再重启下电脑就可以正常使用了

  9. Machine Learning 学习笔记 (1) —— 线性回归与逻辑回归

    本系列文章允许转载,转载请保留全文! [请先阅读][说明&总目录]http://www.cnblogs.com/tbcaaa8/p/4415055.html 1. 梯度下降法 (Gradien ...

  10. CentOS7下通过rpm方式安装MySQL及插入中文问题解决 [原创]

    一 CentOS下通过rpm方式安装MySQL CentOS版本:CentOS-7 MySQL版本:MySQL-5.6.22 在网上搜了一下,Linux下安装MYSQL有三种方式: 1) 通过yum命 ...