在工作中用了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之流好;
对搜索引擎不友好
破坏程序的异常机制
存在一些安全问题,暴露了一些程序接口和数据逻辑

转自:http://www.phppan.com/2009/09/ajax-summary/

非常不错的ajax原理总结的更多相关文章

  1. AJAX原理总结

    AJAX全称 Asynchronous JavaScript and XML(异步的JavaScript 和XML) 同步和异步 异步传输是面向字符的传输,单位是字符 同步传输是面向比特,单位是帧,传 ...

  2. 什么是ajax,ajax原理是什么 ,优缺点是什么

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

  3. ajax原理图解

    Ajax 原理图解 摘自: http://www.nowamagic.net/ajax/ajax_PicForAjaxPrinciple.php Ajax其实已经使用很久了,但一直也没有时间正经的找本 ...

  4. 浅析ajax原理与用法

    1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建 动态网页的技术,目的是显示动态局部刷新.通过XML ...

  5. Ajax原理一篇就够了

    Ajax原理一篇就够了 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简 ...

  6. 封装ajax原理

    封装ajax原理 首先处理 用户如果不传某些参数,设置默认值 type默认get 默认url为当前页 默认async方式请求 data数据默认为{} 处理用户传进来的参数对象 遍历,拼接成key=va ...

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

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

  8. 大话AJAX原理

    大话AJAX原理 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简单地说 ...

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

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

随机推荐

  1. 2.新手必须掌握的Linux命令

    第2章 新手必须掌握的Linux命令 章节简述: 本章首先介绍系统内核和Shell终端的关系与作用,然后介绍Bash解释器的4大优势并学习Linux命令的执行方法.经验丰富的运维人员可以通过合理地组合 ...

  2. python-高级编程-06-长连接&连接池

    我们都知道tcp是基于连接的协议,其实这个连接只是一个逻辑上面的概念,在ip层来看,tcp和udp仅仅是内容上稍有差别而已. tcp 的连接仅仅是连接两端对于四元组和sequence号的一种约定而已 ...

  3. oracle 可以连接数据库,vs连不上. 报错提示:ORA-12154: TNS: 无法解析指定的连接标识符

    方法1:问题:VS 连接 Data Source=ORCL_Service19;User Id=*;Password=* 连接不上 oracle 可以连接数据库,vs连不上,报错提示:ORA-1215 ...

  4. Leetcode 480.滑动窗口中位数

    滑动窗口中位数 中位数是有序序列最中间的那个数.如果序列的大小是偶数,则没有最中间的数:此时中位数是最中间的两个数的平均数. 例如: [2,3,4],中位数是 3 [2,3],中位数是 (2 + 3) ...

  5. Leetcode 456.132模式

    132模式 给定一个整数序列:a1, a2, ..., an,一个132模式的子序列 ai, aj, ak 被定义为:当 i < j < k 时,ai < ak < aj.设计 ...

  6. 用CSV库一行行插入数据

    语料团队之前都是手动标注文字的定位位置,今天写了个小脚本,帮他们批量生成文字对应的定位. 其中数据生成后,要生成csv文件,查看了下使用csv库. import csv row1 = [1,2,3,4 ...

  7. python object与dict互相转换

    代码如下 # 将class转dict,以_开头的属性不要 def props(obj): pr = {} for name in dir(obj): value = getattr(obj, name ...

  8. vim的复制粘贴(包括系统剪贴板)

    1.vim常用复制粘贴命令 Vim的复制粘贴命令无疑是y (yank),p(paster),加上yy,P PS: vim有个很有意思的约定(我觉得是一种约定),就是某个命令的大小写都是实现某种功能,只 ...

  9. 获取本机外网IP的工具类

    ExternalIpAddressFetcher.java package com.tyust.common; import java.io.IOException; import java.io.I ...

  10. linux内核学习之四:进程切换简述【转】

    转自:http://www.cnblogs.com/xiongyuanxiong/p/3531884.html 在讲述专业知识前,先讲讲我学习linux内核使用的入门书籍:<深入理解linux内 ...