一、什么是Ajax

Ajax英文全称为“ Asynchr JavsScript and XML”(异步的JavaScript和XML),是一种创建

交互式网页的开发技术。

二、Ajax技术的核心

Ajax是一系列相关技术的融合,其核心包括XMLHttpRequest、JavsScript和DOM技术,数据格式

的不同可能会用到Json或者XML的技术。

XMLHttpRequest是它的核心的内容,它能够为页面中的JavaScript脚本提供特定的通信方式,

从而使页面的javascript脚本和服务器之间形成动态交互的效果,XMLHTTPRequest的最大的优点

是页面内的javascript脚本可以不用刷新页面,而直接和服务器发生交互,从而实现页面无刷新的效果。

三、XMLHttpRequest方法属性描述

1、方法描述

abort()停止当前请求

getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")返回指定首部的串值

open("method","URL",[asyncFlag],["userName"],["password"])建立对服务器的调用。method参数可以是GET、POST或PUT。

url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数,是否异步,用户名,密码

send(content)向服务器发送请求

setRequestHeader("header", "value")把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。

设置header并和请求一起发送 ('post'方法一定要 )

XMLHttpRequest 对象属性描述

2、方法描述

onreadystatechange状态改变的事件触发器,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数

readyState请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成

responseText服务器的响应,返回数据的文本。

responseXML服务器的响应,返回数据的兼容DOM的XML文档对象 ,这个对象可以解析为一个DOM对象。

responseBody服务器返回的主题(非文本格式)

responseStream服务器返回的数据流

status服务器的HTTP状态码(如:404 = "文件末找到" 、200 ="成功" ,等等)

statusText服务器返回的状态文本信息 ,HTTP状态码的相应文本(OK或Not Found(未找到)等等)

四、Ajax工作原理原理

AJAX的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器相应异步化。并不是所有的用户请求

都提交给服务器,像一些数据验证和数据处理等都交给AJAX引擎自己来做,只有确定需要从服务器读取新数据时再由

AJAX引擎代为向服务器提交请求。如图:

 

五、Ajax的优点

1、减轻服务器的负担,提升了网站的性能。

2、无刷新更新页面,减少了用户等待网站加载的时间。

3、用户体验更加友好,可以避免出现白屏的情况。

4、Ajax是基于标准化并且广泛使用的技术几乎所有的主流浏览器都支持该技术,ye不需要单独安装插件。

5、Ajax可以使Web中的页面和应用分离,便于分工合作。

六、Ajax缺点

1、对于移动设备不能很好的支持。

2、Ajax干掉了back按钮,即对浏览器后退机制的破坏。

3、安全问题。比如:跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。

4、对搜索引擎的支持比较弱。

5、破坏了程序的异常机制。至少从目前看来,像ajax.dll,ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。

造成调试的困难。

七、使用原则

1、Ajax适用场景

表单驱动的交互

深层次的树的导航

快速的用户与用户间的交流响应

类似投票、yes/no等无关痛痒的场景

对数据进行过滤和操纵相关数据的场景

普通的文本输入提示和自动完成的场景

2、Ajax不适用场景

部分简单的表单

搜索

基本的导航

替换大量的文本

对呈现的操纵

八、原生AJAX写法

var XHR=null;

if (window.XMLHttpRequest) {

// 非IE内核

XHR = new XMLHttpRequest();

} else if (window.ActiveXObject) {

// IE内核,这里早期IE的版本写法不同,具体可以查询下

XHR = new ActiveXObject("Microsoft.XMLHTTP");

} else {

XHR = null;

}

if(XHR){

XHR.open("GET", "ajaxServer.action");

XHR.onreadystatechange = function () {

// readyState值说明

// 0,初始化,XHR对象已经创建,还未执行open

// 1,载入,已经调用open方法,但是还没发送请求

// 2,载入完成,请求已经发送完成

// 3,交互,可以接收到部分数据

// status值说明

// 200:成功

// 404:没有发现文件、查询或URl

// 500:服务器产生内部错误

if (XHR.readyState == 4 && XHR.status == 200) {

// 这里可以对返回的内容做处理

// 一般会返回JSON或XML数据格式

console.log(XHR.responseText);

// 主动释放,JS本身也会回收的

XHR = null;

}

};

XHR.send();

}

公众号原文

【原创】Ajax的用法总结的更多相关文章

  1. Ajax.ActionLink 用法

    Ajax.ActionLink 用法 Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称 ...

  2. MVC学习十二:Ajax.ActionLink用法

    Ajax.ActionLink用法 <!--使用Ajax.BeginForm必须引用的js文件--> <script type="text/javascript" ...

  3. 关于Jquery Ajax的用法

    今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...

  4. js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据)

    js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...

  5. ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...

  6. jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...

  7. 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问 ...

  8. 详细解读Jquery的$.get(),$.post(),$.ajax(),$.getJSON()用法

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第 ...

  9. 理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    ajax的4种方法:$.get.$.post.$getJSON.$ajax. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] ...

随机推荐

  1. TypeScript入门-高级类型

    高级类型 交叉类型 交叉类型,就是将多个类型合并为一个新的类型,这个新的类型具有这多个类型的成员,含有这几个类型的所有特性,是他们的综合体,像是集合的并集 例子: function extend< ...

  2. Failed to read artifact descriptor for xxx:jar 的Maven项目jar包依赖配置的问题解决

    在开发的过程中,尤其是新手,我们经常遇到Maven下载依赖jar包的问题,也就是遇到“Failed to read artifact descriptor for xxx:jar”的错误. 对于这种非 ...

  3. Win10或Win8下ObjectARX2015 Wizard向导创建项目失败解决方法

    [原创]objectARX 2015 Wizard安装向导在Win8/win10下无法创建项目的解决方法总结by edata @2017-5-1objectARX 2015 Wizard安装向导在Wi ...

  4. redis3.05安装

    #yum -y install gcc #cd /usr/local/src #tar -zxvf redis-3.0.5.tar.gz #cd redis-3.05/ #make PREFIX=/u ...

  5. N维法向量与N维超平面的关系的简单证明(日志二)

    虽然按照上面的方式证明出来,但感觉之中,似乎依旧是不严密的, 如下: 如果直线是2x+2y+1=0 那么(-1,1)也是其平行向量 ,.那么(1,1)依旧是法向量 此时,直线经过(0,-1/2)这个点 ...

  6. git pull冲突:commit your changes or stash them before you can merge.

    今天用git pull来更新代码,遇到了下面的问题: error: Your local changes to the following files would be overwritten by ...

  7. Redis学习-String

    命令  描述  复杂的  返回值 SET key value [EX seconds] [PX milliseconds] [NX|XX] 将字符串值value关联到key.如果key已经持有其他值, ...

  8. /usr/lib/x86_64-linux-gnu/libopencv_highgui.so.2.4.9: undefined reference toTIFFIsTiled@LIBTIFF_4.0'

    今天编译caffe ,本来编译过无数次caffe了,基本坑都能解决的.但这次惹恼我了.一直搞不定. 错误信息是这样的: /usr/lib/x86_64-linux-gnu/libopencv_high ...

  9. Java中的栈上分配

    博客搬家自https://my.oschina.net/itsyizu/blog/ 什么是栈上分配 栈上分配是java虚拟机提供的一种优化技术,基本思想是对于那些线程私有的对象(指的是不可能被其他线程 ...

  10. Java反射机制剖析(二)-功能以及举例

    从<java反射机制剖析(一)>的API我们看到了许多接口和类,我们能够通过这些接口做些什么呢? 从上篇API中我们能看到它能够完成下面的这些功能: 1)     获得类 A.     运 ...