1、需要具备的基础知识
- HTML/XHTML
- CSS
- JavaScript/DOM
2、什么是Ajax
- Ajax全称:Asynchronous JavaScript And XML
- 是一种异步加载数据的技术
- 用于创建快速动态网页
- 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
3、AJAX基于现有的Internet标准
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
4、Ajax的使用
4.1 创建XMLHttpRequest 对象
variable=new XMLHttpRequest();
4.2 向服务器发送请求
使用 XMLHttpRequest 对象的 open() 和 send() 方法
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
方法 | 描述 |
---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。• method:请求的类型;GET 或 POST• url:文件在服务器上的位置• async:true(异步)或 false(同步) |
send(string) | 将请求发送到服务器。• string:仅用于 POST 请求 |
4.3 GET 请求
- 向 URL 添加一个唯一的 ID
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
- 通过 GET 方法发送信息,请向 URL 添加信息
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
4.4 POST 请求
- 一个简单 POST 请求
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
- 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据
xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
方法 | 描述 |
---|
setRequestHeader(header,value) | 向请求添加 HTTP 头。• header: 规定头的名称• value: 规定头的值 |
4.5 服务器响应
- 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
属性 | 描述 |
---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
- onreadystatechange 事件
XMLHttpRequest 对象的三个重要的属性
属性 | 描述 |
---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。• 0: 请求未初始化• 1: 服务器连接已建立• 2: 请求已接收• 3: 请求处理中• 4: 请求已完成,且响应已就绪 |
status | 200: "OK"404: 未找到页面 |