AJAX初学者必看

Posted 2021-04-15 编程新技术

如果你觉得本文对你有所帮助，点击上面蓝色的字体，关注一走一波，谢谢

在继续学习之前，你需要对下面的知识有基本的了解

1.html/XHTML

2.CSS

3.javascript/DOM

什么是AJAX？

• AJAX=异步JavaScript和XML。

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

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

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

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

Google Suggest

• 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

• Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送

• 到服务器，然后服务器会返回一个搜索建议的列表 。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

 

variable=new XMLHttpRequest();

GET 还是 POST？

• 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

• 然而在以下情况下请使用POSt

• 无法使用缓存文件（更新服务器上的文件或数据库）

• 向服务器发送大量数据（POST没有数据量显示）

• 发送包含未知字符用户输入时，POST比GET更稳定也更可靠

一个简单的GET请求：

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

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

url - 服务器上的文件

xmlhttp.open("GET","ajax_test.asp",true);

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本

• 当响应就绪后对响应进行处理

AXAJ数据库

showCustomer() 函数

当用户在上面的下拉列表中选择某个客户时，会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发：

showCustomer() 函数执行以下任务：

• 检查是否已选择某个客户

• 创建 XMLHttpRequest 对象

• 当服务器响应就绪时执行所创建的函数

• 把请求发送到服务器上的文件

• 请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）

注释

/*  */利用这对符号进行注释

• Ajax 类

• sUrl : 目标 URL

• sQueryString : 提交变量

• callbackFunc : 回调函数

• callbackParams : 回调函数参数

• sRecvType : 返回值格式