前端之家收集整理的这篇文章主要介绍了
ajax开发步骤,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
//第一个:创建ajax引擎对象 这是ajax开发的核心对象 XmlHttpRequest
function createXmlHttpRequest(){
var xmlHttp;
try { //Firefox,Opera 8.0+,Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
try { //Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
}
return xmlHttp;
}
window.onload=function(){
document.getElementById("ok").onclick = function(){
//1.创建一个ajax引擎
var xmlHttp=createXmlHttpRequest();
//4.处理服务器响应数据
xmlHttp.onreadystatechange=function(){
alert(xmlHttp.readyState)
if(xmlHttp.readyState==4){
if(xmlHttp.status==200 || xmlHttp.status==304){
//接受服务器响应结果;
var data=xmlHttp.responseText;
alert(data);
}
}
}
//2.打开一个连接
/**
* open(method,url,asynch)
* method:请求类型:get和post;字符串
* URL:请求路径可以是相对路径和绝对路径
* asynch:表示是否是异步传输:默认是true异步的
*/
xmlHttp.open("get","../ajaxServlet?name=liuzhaoqiang×tamp="+new Date().getTime(),true);
//如果是post请求的需要从小设置编码格式 这样可以通知服务器当的请求格式
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.项服务器发送数据
/**
* send(data) data:客户端项服务器发送的数据
* 若选用的是get请求:这不会发送任何数据 给send方法传递null 如果传值服务器也接收不到
*
*/
xmlHttp.send(null);
/**
* onreadystatechange=function(){};
* 事件处理函数(监听器) 可以监听服务器端每一步的操作 操作通知给浏览器 有服务器触发
* 这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式
* 0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
每次 readyState 值的改变,都会触发 readystatechange 事件
在xmlHttpRequest对象中同时存放status对象 存放访问服务器的状态码
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
*/
}
}
原文链接:https://www.f2er.com/ajax/166461.html