在继续学习之前,你需要对下面的知识有基本的了解
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 : 返回值格式 ( 0: 文本, 1: XML );