JavaWeb总结(十五)
AJAX(Asynchronous JavaScript and XML(异步的 JavaScript 和 XML))
AJAX的作用是什么?
在无需重新加载整个网页的情况下,能够更新部分网页的技术
是一种用于创建快速动态网页的技术
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新
AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest对象的方法
方法 |
描述 |
Abort() |
停止当前请求 |
getAllResponseHeaders() |
作为字符串返回完整的headers |
getResponseheader(“hederLabel”) |
作为字符串返回单个的header标签 |
open(“method”,“URL”[,asyncFlag[,”userName”[,”password”]]]) |
设置未决的请求的目标URL方法和其他参数 |
send(content) |
发送请求 |
setRequestHeader(“label”,”value”) |
设置header并和请求一起发送 |
XMLHttpRequest对象
属性 |
描述 |
onreadystatechange |
状态改变的事件触发器 |
readyState |
对象状态(integer):0=未初始化,1=读取中,2=已读取,3=交互中,4=完成 |
responseText |
服务器进程返回数据的文本 |
responseXML |
服务器进程返回数据的兼容DOM的XML文档对象 |
status |
服务器返回的状态码,如404=“文件未找到”、200=“成功” |
statusText |
服务器返回的状态文本信息 |
从网页中获取XMLHttpRequest对象(存在兼容性问题)
//创建 XMLHttpRequest var htttRequest =null; if(document.all){ htttRequest = new ActiveXObject("Microsoft.XMLHTTP"); }else{ htttRequest = new XMLHttpRequest(); }
AJAX - 向服务器发送请求
XMLHttpRequest 对象用于和服务器交换数据。
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
方法 |
描述 |
open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) |
send(string) |
将请求发送到服务器。 string:仅用于 POST 请求 |
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您想发送的数据:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
方法 |
描述 |
setRequestHeader(header,value) |
向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值 |
异步 - True 或 False?
True异步是通过 AJAX,JavaScript 无需等待服务器的响应,而是:
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
False同步是通过AJAX,JavaScript等待服务器的响应后再对后续响应进行处理
AJAX开发步骤
1.客户端事件发生,调用JavaScript函数编写的事件处理程序
2.在事件处理程序中创建XMLHttpRequest对象
3.配置XMLHttpRequest对象
4.XMLHttpRequest对象发送一个异步HTTP请求到服务器
5.服务器程序接收请求,处理请求,返回相应
6.XMLHttpRequest对象调用callback()函数并处理结果
7.更新HTML
我不作恶
但有权拒绝为善
我不赞同
但是我捍卫你不为善的权力