admin 管理员组

文章数量: 887021

Ajax.

Ajax

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML):

  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
  • AJAX最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
  • AJAX 不需要任何浏览器插件,但需要允许JavaScript在浏览器上执行(这点不用考虑)。

AJAX是基于现有的Internet标准,并且联合使用XMLHttpRequest 对象 (异步的与服务器交换数据)、JavaScript/DOM (信息显示/交互)、
CSS (给数据定义样式)、XML (作为转换数据的格式)。

AJAX应用程序与浏览器和平台无关。

了解更多:AJAX菜鸟教程


Ajax原理


Ajax基本结构(Jqurey)

$.ajax({          url:"发送请求(提交或读取数据)的地址", dataType:"预期服务器返回数据的类型",  type:"请求方式", async:"true/false",data:{发送到/读取后台(服务器)的数据,json字符串},success:function(data){请求成功时执行},      error:function(){请求失败时执行}
});

ajax参数均为选填,如果不设置,按默认值处理:

  1. url 默认为当前页地址

  2. dataType 可用类型:
    xml:返回XML文档,可用Jquery处理。
    html:返回纯文本HTML信息。
    script:返回纯文本JavaScript代码。
    json:返回json数据。
    jsonp:(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名获取资料,即跨域读取数据。
    text:返回纯文本字符串。
    (如果不指定,Jquery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递)

  3. type 可用类型主要为post和get两种(默认为GET):
    GET:从指定的资源请求数据(从服务器读取数据)
    POST:向指定的资源提交要被处理的数据(向服务器提交数据)
    GET 还是 POST?
    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
  1. async 异步方式,默认为true,即异步方式。当设置为false时,为同步方式。
    异步方式:ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发ajax里的success方法,这时候执行的是两个线程。
    同步方式:在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

  2. data 请求的数据,{ }中可以填入多项数据。如果不填(一般为get请求),则读取对应地址的全部数据,此时可以在console中通过console.log(res)显示数据情况。

  3. success 和 error 两个函数 一般需要设置,方便确定请求是否成功,以及请求成功后的提示或是对数据的处理和显示。

实例:

<script type="text/javascript" src=".js"></script><script type="text/javascript">function Save(event){var url = "../updata_setting/updata";$.ajax({type: "POST",url: url,data: JSON.stringify(vm.updata_setting),success: function(r){if(r.code === 0){alert('操作成功', function(index){vm.reload();});}else{alert(r.msg);}}});}</script>

END

本文标签: Ajax