ajax极简教程

原文

一、什么是ajax

ajax即异步JavaScript和XML，它是一种用于创建快速动态网页的技术。作用是通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。


二、实现ajax基本步骤

  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象.

  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

  • 设置响应HTTP请求状态变化的函数.

  • 发送HTTP请求.

  • 获取异步调用返回的数据.

  • 使用JavaScript和DOM实现局部刷新.

三、ajax实现方式

这里我们不做原生ajax的介绍，因为JQuery对ajax进行了封装。可以用少量的代码实现原生ajax的功能，同时又帮助我们解决了浏览器的兼容问题，没有道理不选它。

$.ajax是对ajax最基础的封装，来看一个简单例子

$.ajax({  
    type : "post",//提交方式  
    url : "${pageContext.request.contextpath}/del.action",//接口url
       data : {  
           "name" : "${name}"  //交互数据
       },success : function(result) {//返回数据根据结果进行相应的处理  
           if ( result.success ) {  
                 alert("删除成功");
           } else {  
                 alert("删除失败");
           }  
      }  
});

关键参数介绍：

  • method //数据的提交方式

  • url //数据的提交url

  • async //是否支持异步刷新，默认是true

  • data //需要提交的数据

  • dataType //服务器返回数据的类型，例如xml,String,Json等

  • success //请求成功后的回调函数

  • error //请求失败后的回调函数

四、常用请求类型介绍

  • multipart/form-data类型主要是上传文件时用到；

  • application/x-www-form-urlencoded类型主要是提交k-v时用到，当然这种方法也可以将json设置在v中提交json数据；

  • application/json类型主要是传递json数据用到，层次比较深的数据；

五、常见响应状态码介绍

  • 100：客户必须继续发出请求

  • 101：客户要求服务器根据请求转换HTTP协议版本

  • 200：请求成功

  • 201：提示知道新文件的URL

  • 202：接受和处理、但处理未完成

  • 203：返回信息不确定或不完整

  • 204：请求收到，但返回信息为空

  • 205：服务器完成了请求，用户代理必须复位当前已经浏览过的文件

  • 206：服务器已经完成了部分用户的GET请求

  • 300：请求的资源可在多处得到

  • 301：删除请求数据

  • 302：在其他地址发现了请求数据

  • 303：建议客户访问其他URL或访问方式

  • 304：客户端已经执行了GET，但文件未变化

  • 305：请求的资源必须从服务器指定的地址得到

  • 306：前一版本HTTP中使用的代码，现行版本中不再使用

  • 307：申明请求的资源临时性删除

  • 400：错误请求，如语法错误

  • 401：请求授权失败

  • 402：保留有效Chargeto头响应

  • 403：请求不允许

  • 404：没有发现文件、查询或URl

  • 405：用户在Request-Line字段定义的方法不允许

  • 406：根据用户发送的Accept拖，请求资源不可访问

  • 407：类似401，用户必须首先在代理服务器上得到授权

  • 408：客户端没有在用户指定的时间内完成请求

  • 409：对当前资源状态，请求不能完成

  • 410：服务器上不再有此资源且无进一步的参考地址

  • 411：服务器拒绝用户定义的Content-Length属性请求

  • 412：一个或多个请求头字段在当前请求中错误

  • 413：请求的资源大于服务器允许的大小

  • 414：请求的资源URL长于服务器允许的长度

  • 415：请求资源不支持请求项目格式

  • 416：请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

  • 417：服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

  • 500：服务器产生内部错误

  • 501：服务器不支持请求的函数

  • 502：服务器暂时不可用，有时是为了防止发生系统过载

  • 503：服务器过载或暂停维修

  • 504：关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

  • 505：服务器不支持或拒绝支请求头中指定的HTTP版本

对一些状态码要明白它的含义，可以帮助我们快速定位程序哪里可能出问题了，或者对不同的结果做详细的失败提示。

六、ajax的优点

  • 减轻服务器负担，按需要获得数据。

  • 无刷新更新页面，减少用户的实际和心理的等待时间。

  • 更好的用户体验。

  • 减轻宽带的负担。

七、ajax的缺点

  • ajax对浏览器的兼容性。

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

返回
顶部