AJAX,全称为"Asynchronous JavaScript and XML",是一种在无需重新加载整个网页的情况下,能够与服务器交换数据并更新部分网页的技术。AJAX并不是一种全新的编程语言,而是一种使用现有标准的新方法,通过组合使用不同的技术,AJAX 提供了创建更好、更快且更用户友好的网络应用程序的可能性。

  1. 背景与起源

在传统的网页浏览中,每当用户与网页进行交互,如填写表单、点击按钮等,浏览器都会向服务器发送请求,服务器处理请求后返回一个新的页面。这种方式下,每当数据更新,用户都需要等待整个页面的重新加载,这导致了页面加载速度慢、用户体验差等问题。

为了解决这些问题,AJAX 技术应运而生。它允许网页在不重新加载整个页面的情况下,通过后台向服务器发送请求并处理响应,从而实现了页面的动态更新。

  1. 工作原理

AJAX 的核心是 XMLHttpRequest 对象。当用户在网页上执行某些操作时,JavaScript 代码会创建一个 XMLHttpRequest 对象,并使用它来向服务器发送异步请求。服务器处理请求后返回数据,JavaScript 代码再使用这些数据来更新网页的某一部分。

这个过程是异步的,意味着它不会阻止用户继续与网页交互。用户可以在等待服务器响应时继续浏览或进行其他操作。

  1. AJAX 请求方法( Method )

GET 、 POST 、 PUT 、 PACTH 、 DELETE 等

jQuery 中也有 AJAX 模块,该模块是在 XMLHttpRequest 的基础上进行了封装,语法( Syntax )
如下:

  $.ajax(  [settings  ]  )  -  默认用  GET  请求从服务器加载数据,  会返回  jQXHR  对象,可以利
用该对象的  abort  方法来取消请求。
    $.get(  url  [,  data  ]  [,  success  ]  [,  dataType  ]  )  -  发起  GET  请求,底层调用的还
是  $ajax()
    $.post(  url  [,  data  ]  [,  success  ]  [,  dataType  ]  )  -  发起  POST  请求,底层调用的
还是  $ajax() 
  1. load():

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

   $('selector').load('URL,data,callback');   
    必需的  *URL*  参数规定您希望加载的  URL。
    可选的  *data*  参数规定与请求一同发送的查询字符串键/值对集合。
    可选的  *callback*  参数是  load()  方法完成后所执行的函数名称。
  1. get() post():
    请求参数( Parameters )
 url  -  指定发送请求的  URL  。
    method  /  type  -  用于指定请求的类型  (e.g.  "POST",  "GET",  "PUT")  ,默认为  GET
    data  -  指定要发送到服务器的数据(  PlainObject  or  String  or  Array  )
    processData  :当  data  是一个对象时,  jQuery  从对象的键  /  值对生成数据字符串,除非该 
processData  选项设置为  false.  例如,  {  a:  "bc",  d:  "e,f"  }  被转换为字符串 
"a=bc&d=e%2Cf"  ,默认为  true  。
    headers  -  请求头的内容(  PlainObject  )


   contentType: 
        application/x-www-form-urlencoded;  charset=UTF-8  ,向服务器发送数据时指定内容
类型。请求体的数据以查询字符串形式提交,如:a=bc&d=e%2Cf  。
        application/json;  charset=UTF-8  指定为  json  字符串类型
        multipart/form-data  。表单类型,一般用于上传文件


  dataType  -  期望服务器端发回的数据类型(  json  、  xml  、  text...  ),默认会根据响应的类
型来自动推断类型。
    timeout  -  请求超时时间。它以毫秒为单位。
    beforeSend  -  这是一个在发送请求之前运行的函数,返回  false  会取消网路请求。
    success  -  请求成功回调的函数  状态码  200


   error  -  请求失败回调的函数 
        500  后台代码出错
        503  服务器维护
        403  没有权限获取资源
        404  没有找到资源
  1. AJAX有几种请求方式

6.1 使用“$.ajax()”创建XMLHttpRequest对象。通过这个方式,你可以进行远程HTTP GET或POST请求以载入数据。你可以指定请求类型(如GET、POST)、数据类型、URL以及请求成功或失败时的回调函数。

6.2 另一种方式是使用简单的GET请求。这种方式适用于简单的GET请求,请求成功时可以调用回调函数。
6.3 还可以使用HTTP POST请求来载入数据。这种方式也适用于POST请求,请求成功时可以调用回调函数。
通过HTTP GET请求载入JSON数据。


波波鱼
4 声望3 粉丝

« 上一篇
认识jQ函数