ajax,是一种异步与服务器通信的方式,可以实现页面无刷新,提高用户体验度。在如今的网站中,到处都是ajax的存在,所以学习ajax用法,也就显得刻不容缓。

只要在页面中的html标签的事件处理脚本或者其他的js代码中调用该异步通信方法就可以完成页面的异步更新。

一、纯js中的用法

1、实现步骤:

s1: 获取一个XMLHttpRequest对象

s2: 编写一个处理函数,绑定到XMLHttpRequest对象的onreadystatechange事件上,该处理函数用于在ajax请求的状态发生变化时进行相应的处理

s3: 在XMLHttpRequest对象上open一个request,形如:xmlHttp.open("GET","status.jsp?id="+Math.random());

s4: setRequestHeader("header","value");可以设置各种header,如果服务器端不需要header信息,也可已省略这一步

s5: send() request

2、获取XMLHttpRequest对象


var xmlHttp;

function createXmlHttpRequest()

{

if (window.XMLHttpRequest)

{

xmlHttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{

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

}

}

3、编写处理函数

function processXXX()

{

if (xmlHttp.readyState==4)

{

if (xmlHttp.status==200)

{

//……

}

}

}

以通过xmlHttp得到responseText或者responseXML,分别得到服务器端的字符串形式或者xml形式的响应,前者通常是一段可以直接用来更新页面的内容,而后者是xml格式的数据,可以用js取出其中的元素值。根据需要选用一种之一即可。例如更新页面上的一个统计数值的处理函数如下

function processstatistics()

{

var responseContext;

if (xmlHttp.readyState==4)

{

if (xmlHttp.status==200)

{

responseContext=xmlHttp.responseText;

document.getElementById("statistics").innerHTML=responseContext;

}

}

}

4、发送异步请求

xmlHttp.open("GET","status.jsp?id="+Math.random(),true);

xmlHttp.send(null);

一般request参数不多时用GET方式就可以,open的第二个参数是要请求的服务器端的一个url,可以是jsp或者servlet,也可已是struts2 action。如果是struts2 action的话,那么在自定义的action控制器中不要配置返回视图,直接在execute方法中用servlet api拿到PrintWriter、写入要返回的内容并flush+close PrintWriter,在execute方法中return null(不跳转到某个试图)即可。url中的id参数是一个无实际意义的参数,但是非常重要,很多浏览器中都会有cache,请求一个地址时,浏览器会检查cache中是否有最近的该url的响应内容,如果有就不会向服务器发送请求,而是直接返回cache中的内容,这样可以提高浏览的速度。浏览器cache是基于这样一个假设:网页的内容不会在很短的一段时间内更新。但对于ajax,有时需要频繁地进行异步更新(如定时更新页面上的系统状态),所以需要加上一个随机的参数,防止cache中的内容影响页面的更新。open的第三个参数为true表示采用异步方式处理请求,ajax必须用true,一般该参数在缺省情况下都是true。

send方法的参数在GET方式下为null即可,在POST方式下send的参数就是要发送的key-value数据,多条数据之间用&分隔,如果post要以表单的形式发送数据,还需要设置header:

setRequestHeader("Content-type","application/x-www-form-urlencoded");

二、jquery中ajax的用法

1、$obj.load(url,[data])

(1)、作用:将服务器返回的数据直接插入到符合要求的节点之上,用此方法合适。相当于obj.innerHTML=服务器返回的数据

(2)、用法 url:请求地址;data:请求参数,有两种形式,

A:请求字符串形式:"name=chang&&age=23"

B:对象形式:{"name":"chang","age":23}

(3)、注意:当没有请求参数,发送get请求;如果有参数,刚发送post请求;不支持异步。

2、$.get(url,[data],[callback],[type])

(1)、作用 使用get方式向服务器发请求。

(2)、用法 url:请求地址;data为请求参数;callback是一个回调函数,格式如function(data,statusText){},其中data是服务器返回的数据,statusText是服务器返回的状态;type:服务器返回的数据类型,有五种A:html 返回一个html文档,B :text返回的是纯文本,C:json返回的是json字符串,D:xml返回的是一个XML文档,E:script:返回的是一个javascript脚本。

3、$.post(url,[type])

略。。。作用同get方法

4、$.ajax()方法

(1)、作用 功能最强的底层实现方法。支持get,post方式,支持同步,支持错误处理.

(2)、用法

1、url(string):请求地址

2、type(string):GET/POST

3、data(object/string):请求参数。格式如(id,name,key为变量):{"name":name,"id":id}

或者"key="+key

4、dataType(string):预期服务器返回的数据类型。

有五种A:html 返回一个html文档,B :text返回的是纯文本,C:json返回的是json字符串, D:xml返回的是一个XML文档,E:script:返回的是一个javascript脚本。

5、success(function):请求成功以后调用的回调函数,有两个参数function(data,textStatus){},其中data为服务器返回的数据,textStatus为描述状态的字符串。

6、error(function):请求失败时调用的函数,有三个参数

function(xhr,textStatus,errorThrown):

A:xhr:底层的XMLHttpRequest对象。

B:textStatus:错误的描述。

C:errorThrown:一般为null

7、async:true(缺省/异步)false(同步)

三、validate.js插件

也有ajax方法,验证用户名等,是否存在的应用。

详见本人上一稿validate的用法

http://www.jb51.cc/article/p-ncjghrgk-pa.html

AJAX请求总结的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. canvas中普通动效与粒子动效的实现代码示例

    canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。本文详细的介绍了粒子特效,和普通动效进行对比,非常具有实用价值,需要的朋友可以参考下

  3. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. canvas学习和滤镜实现代码

    这篇文章主要介绍了canvas学习和滤镜实现代码,利用 canvas,前端人员可以很轻松地、进行图像处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. 浅析HTML5中的download属性使用

    这篇文章主要介绍了浅析HTML5中的download属性使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. localStorage的过期时间设置的方法详解

    这篇文章主要介绍了localStorage的过期时间设置的方法详解的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  7. 详解HTML5 data-* 自定义属性

    这篇文章主要介绍了详解HTML5 data-* 自定义属性的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. HTML5 Blob 实现文件下载功能的示例代码

    这篇文章主要介绍了HTML5 Blob 实现文件下载功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  9. HTML5的postMessage的使用手册

    HTML5提出了一个新的用来跨域传值的方法,即postMessage,这篇文章主要介绍了HTML5的postMessage的使用手册的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. 教你使用Canvas处理图片的方法

    本篇文章主要介绍了教你使用Canvas处理图片的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部