浅谈AJAX

目录

一  Ajax简述

1.1Ajax简介

1.2Ajax技术原理

二 XMLHttpRequest

三 Ajax请求

四 Ajax注意点

一、Ajax简述

---

1.Ajax简介

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

AJAX 并非编程语言。AJAX 仅仅组合了：

• 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
• JavaScript 和 HTML DOM（显示或使用数据）

AJAX = Asynchronous JavaScript And XML.

2.Ajax技术原理

 网页中发生事件，由javascript创建一个XMLHttpRequest对象，再又XMLHttpRequest对象来向web服务器发送请求，之后服务器再来处理该请求，请求处理完成之后再又服务器将响应传送回网页端，此时JavaScript读取该响应，来执行争取的动作操作。

二、XMLHttpRequest

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。如果您的通信流程需要从服务器端接收事件或消息数据，请考虑通过 接口使用 server-sent events。对于全双工的通信， HTTP 可能是更好的选择。

三、Ajax请求

XMLHttpRequest 对象用于同服务器交换数据。

向服务器发送请求

如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open和 send方法

方法	描述
open(method, url, async)	规定请求的类型 method：请求的类型：GET 还是 POST url：服务器（文件）位置 async：true（异步）或 false（同步）
send()	向服务器发送请求（用于 GET）
send(string)	向服务器发送请求（用于 POST）

GET 和POST区别

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

• 缓存文件不是选项（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 无大小限制）
• 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

GET 请求

一条简单的 GET 请求：

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

POST 请求

一条简单的 POST 请求：

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

四、注意事项

1、不同浏览器下XMLHttpRequest对象的有不同的建立方式

2、open方法三个参数含义，需要注意GET方式和POST方式服务器端地址的不同写法

3、GET方式和POST方式send的参数的不同之处，以及POST方式下send之前需要设置请求头信息的工作

4、如何判断正确的响应数据以及返回，此外还要注意如何获取响应数据内容

5、在设置回调函数的时候注意不要添加括号