在工作中用了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. 创建sql作业（JOB）

    在SQL Server日常需求处理中,会遇到定时执行或统计数据的需求,这时我们可以通过作业(JOB)来处理,从而通过代理的方式来实现数据的自动处理.一下为SQL Server中创建作业的脚本,供大家参 ...

  2. TensorFlow——交互式使用会话：InteractiveSession类

    目的是在交互式环境下(如jupyter),手动设定当前会话为默认会话,从而省去每次都要显示地说明sess的繁琐,如:Tensor.ecal(session=sess)或sess.Operation.r ...

  3. 《机器学习实战》笔记——regression

    本章介绍了不同场景下使用的线性回归方法 一般情况:简单的线性回归 欠拟合:局部加权线性回归 特征数大于样本数:岭回归 或 lasso法 最后引出交叉验证,用来定量地找到最佳参数值 # _*_ codi ...

  4. NOJ——聊天止于呵呵（string流重定向+map，水题）

    [1645] 聊天止于呵呵 时间限制: 5000 ms 内存限制: 65535 K 问题描述 (现代版)俗话说:流言止于智者,聊天止于呵呵.输入一段聊天记录,你的任务是数一数有 多少段对话“止于呵呵” ...

  5. input最大长度限制问题

    <input type="text" maxlength="5" /> //可以 <input type="number" ...

  6. 【前端学习笔记】2015-09-02~~~~ 关于filter()匹配的使用

    关于filter的使用先记录以下几点: 1.filter(':even')遍历所有元素,找到index为偶数的元素.. ps: filter(':odd')       odd----奇数   eve ...

  7. 爬虫【自动登陆github和抽屉】

    自动登陆github用户详情页 代码 #! /usr/bin/env python # -*- coding: utf- -*- # __author__ = "wuxiaoyu" ...

  8. ajax提交数据服务端返回报错

    报错如下: if response.get('X-Frame-Options') is not None:AttributeError: 'str' object has no attribute ' ...

  9. svg优雅降级技术

    这是一个名叫Alexey Ten首先提出来的,类似下面的代码: <svg width="96" height="96"> <image xli ...

  10. 2017.8.2 Noip2018模拟测试赛（十八）

     日期: 八月二日  总分: 300分  难度: 提高 ~ 省选  得分: 40分(又炸蛋了!!) 题目列表: T1:分手是祝愿 T2:残缺的字符串 T3:树点涂色 赛后心得: 哎,T1求期望,放弃. ...