Ajax开发解读 ajax应用开发典型实例

Ajax

1.介绍：Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。

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

2. Ajax的优缺点

优点：1）能在不更新整个页面的前提下维护数据

2）异步与服务器通信上执行

3）前端和后端负载平衡

4）基于标准被广泛支持

5）界面与应用分离

缺点：1）它可能破坏浏览器的后退与加入收藏书签功能

2）对搜索引擎支持较弱

3）破坏程序的异常处理机制

4）违背URL和资源定位的初衷

5）AJAX不能很好支持移动设备

6）客户端过肥，太多客户端代码造成开发上的成本

3. Ajax请求

方法 描述

$.ajax(url,[settings]) 通过 HTTP 请求加载远程数据

load(url, [data], [callback])载入远程 HTML 文件代码并插入至 DOM 中

$.get(url,[data],[fn],[type])通过远程 HTTP GET 请求载入信息

$.getJSON(url,[data],[fn])通过 HTTP GET 请求载入 JSON 数据

$.getScript(url,[callback])通过 HTTP GET 请求载入并执行一个 JavaScript 文件

$.post(url,[data],[fn],[type])通过远程 HTTP POST 请求载入信息

注意：

1. $.ajax(url,[settings]) ：所有的选项都可以通过$.ajaxSetup()函数来全局设置。

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

2.load(url, [data], [callback])

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。

callback:载入成功时回调函数。

3.get(url, [data], [callback], [type])

url:待载入页面的URL地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

4.事件

事件 描述

ajaxComplete(callback)AJAX 请求完成时执行函数

ajaxError(callback) AJAX 请求发生错误时执行函数

ajaxSend(callback) AJAX 请求发送前执行函数

ajaxStart(callback) AJAX 请求开始时执行函数

ajaxStop(callback) AJAX 请求结束时执行函数

ajaxSuccess(callback) AJAX 请求成功时执行函数

5.发送Ajax请求的五个步骤

第一步：获取一个XMLHttpRequest对象

var ajax = new XMLHttpRequest();

第二步：规定请求的类型、URL 以及是否异步处理请求。

ajax.open('GET',url,true);

第三步：发送信息至服务器时内容编码类型

ajax.setRequestHeader("Content-type", " ");

第四步：发送请求

ajax.send(null);

send向服务器发送请求

如果请求方式是get，那么我们使用send(null) 原因:get请求方式是没有http请求体

只有post请求方式时，才有请求体,所以send的参数只是在post请求时使用

第五步：接受服务器响应数据

ajax.onreadystatechange = function () {

if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {

}

};

注释：

new XMLHttpRequest() ：生成一个对象

open：初始化一个请求。

1、请求类型：get、post

2、请求地址：/hello.json(必须是http或者https开头)

3、请求方式： true：为异步方式。false：为同步方式

send：发送

status: HTTP响应状态代码

responseText：响应文本（内容）

readySteat ： 交互流程（1，2，3，4）

0 － （未初始化）还没有调用send()方法

1 － （载入）已调用send()方法，正在发送请求

2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

3 － （交互）正在解析响应内容

4 － （完成）响应内容解析完成，可以在客户端调用了

第六步：json字符串转换集json对象、json对象转换json字符串

//字符串转对象

JSON.parse(json)

eval('(' + jsonstr + ')')

// 对象转字符串

JSON.stringify(json)

常见的状态码有哪些？

200(成功) 服务器已成功处理了请求

304(未修改) 自从上次请求后 请求的网页未修改过。服务器返回此响应时 不会返回网页内容

400 (错误请求）服务器不理解请求的语法

403(禁止) 服务器拒绝请求

404(未找到) 服务器找不到请求的网页

500 (服务器内部错误) 服务器遇到错误，无法完成请求。

501 (尚未实施) 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。

502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。

503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。

504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

8.ajax接受到的数据类型为String、JSON对象、JSON串。

9. 页面不进行跳转刷新的时候，异步处理数据的时候，表单自动补全功能可以使用Ajax；提交后不再使用原页面，可以进行跳转刷新的，查询之类的功能，可以不用Ajax。

————————————————

版权声明：本文为CSDN博主「暮雪亦成诗」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/Lucky_BonnenuIt/article/details/101550135