邹哥教你学习Ajax

Posted 2021-04-15 邹哥观察

天才是百分之一的灵感，百分之九十九的血汗。——爱迪生

AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术，

AJAX技术包括以下几种技术。

JavaScript（绑定所有技术）

XML、XSLT（数据交换）

XMLHttpRequest（异步数据查询、检索）

DOM (动态显示及交互)

Dhtml（基于浏览器的页面）

CSS（页面样式）

其中Ajax的核心对象是XMLHTTPRequest对象，这个对象包含很多常用的属性和方法。

常用方法：

open(method,URL,async)：建立与服务器的连接

        method参数指定请求的HTTP方法,典型的值是GET或POST

       async参数指定是否使用异步请求，其值为true或false

       send(content) ：发送请求

                 content参数指定请求的参数

       setRequestHeader(header,value)：设置请求的头信息

常用属性：

onreadystatechange：指定回调函数

readystate: XMLHttpRequest的状态信息

status: http的状态码

timeout : 设置XMLHttpRequest请求的超时时间

responseType : 设置响应返回的数据格式

responseText：获得响应的文本内容

responseXML：获得响应的XML文档对象

如何使用Ajax

jQuery Ajax简化Ajax请求

$.ajax(options) 返回的是XMLHttpRequest对象

        options (可选) : AJAX 请求设置。key/value方式

        常见选项设置如下:

               type --- 请求方式,默认为GET

               url --- 请求资源的URL

               data --- 请求参数信息 key/value

               success --- 回应成功的回调函数

               error --- 回应失败的回调函数

$.get(url,[data],[callback])

         url 请求资源的URL

         data 请求参数信息 key/value

         callback 载入成功时回调函数

$.post(url,[data],[callback])

         url 请求资源的URL

         data 请求参数信息 key/value

         callback 发送成功时回调函数

使用jQuery Ajax实现同一页面的CURD

页面效果参考：

js代码参考：