Ajax,即Asynchronous JavaScript and XML(异步的JavaScript和XML),它不是一种新的语言,而是一种快速创建动态网页的技术。Ajax通过在后台与服务器进行数据交换,在不重新加载整个页面的情况下更新网页的部分内容。同时,它的使用也会有一些影响,比如影响后退按钮和收藏夹。使用场景包括:电商网站中更新购物车、微博点赞功能等。
实现方式:
1. 运用HTML和CSS来实现页面,表达信息;
2. 运用XMLHttpRequest对象和Web服务器进行数据的异步交换;
3. 运用JavaScript操作DOM,实现动态局部刷新。

创建XMLHttpRequest对象

var xhr;
if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // IE7+、Firefox、Chrome...
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE6以下
}

XMLHttpRequest向服务器发送请求
需要使用XMLHttpRequest对象的open(method,url,async)和send(string)。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send()方法,当请求方式是get时,send可以没有参数,或者为null;当请求方式是post时,可以将传送内容以string方式发出,也可以为空,附加在url后面。

get请求:一般用于信息获取,使用url传递参数,对所发送信息的数量也有限制,一般2000个字符;
post请求:一般用于修改服务器上的资源,对所发送信息的数量没有限制;
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库);
向服务器发送大量数据(POST 没有数据量限制);
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠。

使用post请求方式时,使用表单post数据时要设置Http头信息,setRequestHeader(header,value),最常用设置的头信息”application/x-www-form-urlencoded”。写在open()和send()方法之间,否则会抛出异常。

xhr.open("POST","ajax_test.asp",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Bill&lname=Gates");

获得服务器的相应
responseText:获得字符串形式的响应数据,如果来自服务器的响应并非 XML,请使用 responseText 属性
responseXML:获得XML形式的响应数据,如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性。
readyState属性的值:
0. 0:请求未初始化,open()方法还没有被调用
1. 1:服务器连接已经建立,open()被调用
2. 2:请求已接收,也就是接收到头信息了
3. 3:请求处理中,也就是接收到相应主体了,已接收到部分数据
4. 4:请求完成,且响应已就绪,也就是响应完成了

处理响应
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

xhr.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {     document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }

Ajax中同步与异步的区别

简单来说,同步需要等待返回结果才能继续,异步不必等待,一般需要监听异步的结果。 同步是在一条直线上的队列,异步不在一个队列上 各走各的 异步:在异步模式下,当我们使用AJAX发送完请求后,可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求,但是因为我们采用了异步执行方式,所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的,那么,这个时候就好比两条线程同时执行一样。 同步:当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执 行完毕后才会继续运行其他代码页面假死状态解除。在同步模式下,当我们使用AJAX发送完请求后,后续还有代码需要执行,我们同样将服务器响应交由另一个JS函数去处理,但是这时的代码执行情况是:在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时,包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样,请求发出后就进入阻塞状态,直到解除阻塞余下的代码才会继续执行。如果采用同步的方式,就失去了Ajax的意义。

Ajax相关知识点的更多相关文章

  1. HTML5 Web缓存和运用程序缓存(cookie,session)

    这篇文章主要介绍了HTML5 Web缓存和运用程序缓存(cookie,session),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. ios – Objective-C中的Google用户serverAuthCode nil

    我正在尝试将GoogleSignIn框架集成到iOS应用程序中,并对服务器上的用户进行身份验证.我设法登录用户,但在–(void)signIn:(GIDSignIn*)signIndidSignInForUser:(GIDGoogleUser*)用户withError:(NSError*)错误委托方法,user.serverAuthCode为nil,我需要通过此服务器身份验证代码,嗯,验证服务器上

  3. ios – CloudKit – 如何保存记录如果不存在

    我正在尝试创建一个包含唯一值的记录类型,并将作为另一个记录类型的目标引用对象.例如,录制类型–电影将包含用户提交的唯一电影列表.而且FavoriteMovies将包含用户参考和电影参考.用户可以从现有电影列表中进行选择,也可以向其中添加新电影.如果我创建一个新的电影记录,而另一个用户创建一个具有相同名称的新记录(在我检索电影列表之后,但在我尝试添加新电影之前),则会出现问题.这两个新记录被认为是具

  4. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  5. 让你真正明白cinder与swift、glance的区别

    Cinder——提供块存储,类似于Amazon的EBS块存储服务,目前仅给虚机挂载使用。Cinder包含以下三个主要组成部分APIservice:Cinder-api是主要服务接口,负责接受和处理外界的API请求,并将请求放入RabbitMQ队列,交由后端执行。Cinder目前提供VolumeAPIV2Schedulerservice:处理任务队列的任务,并根据预定策略选择合适的VolumeService节点来执行任务。目前版本的cinder仅仅提供了一个SimpleScheduler,该调度器选择卷数量

  6. swift – 如何编码非托管到base64以发送到另一台服务器?

    我正在尝试使用密钥对加密来验证我的应用程序和我的PHP服务器之间的身份.为此,我需要在我的应用程序中生成公钥后将公钥发送到服务器.publicKey的类型为Unmanaged.我在上面的代码中得到的错误是:调用中的额外参数’base64EncodedData’我该怎么办?有没有更好的办法?编辑:这是密钥对的生成方式:编辑2:所以问题是SecKey不是NSData,所以我的问题应该是:如何将publicKey:SecKey转换为NSData?您似乎可以将密钥临时存储到钥匙串,然后将其恢复并将其转换为数据:

  7. 如何在android中设置多个SMTP服务器?

    我的问题是如何设置多个SMTP服务器在Android中发送邮件,如:雅虎,hotmail,gmail,rediff任何类型的域名将在发送邮件时起作用.任何人都可以建议任何网站或任何想法吗?请帮帮我,谢谢你.解决方法以下是GMail,Yahoo!的测试设置.和Hotmail.使用适用于Android的JavaxMail端口进行测试.

  8. 如何在Android服务器上发布大型视频?

    我想发布一个大视频.我正在使用FTP将视频发送到服务器,但上传会在一段时间后停止.在服务器上视频崩溃,但我可以上传较小的视频.我还使用HTTP将视频发送到服务器,作为Base64编码字符串发送,但编码时出现内存不足异常.我试图将视频上传为文件,但没有成功.将大型视频上传到服务器的最佳方法是什么?

  9. android rest客户端不支持的媒体类型

    我尝试从android模拟器发送请求到一个安静的服务器.但我总是得到错误:415UnsupportedMediaType.客户代码:服务器的代码:解决方法问题是服务器不知道客户端请求的媒体类型.在客户端代码中尝试这样的事情:request.setHeader(“Content-Type”,“application/json”);

  10. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

随机推荐

  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找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部