ajax基础
一、简介:
AJAX即“Asynchronous Javascript + XML ”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页面。
二、ajax请求
ajax 请求一般分成 4 个步骤。
1、创建 ajax 对象(XMLHttpRequest)
在创建对象时,有兼容问题,使用以下代码判断:
var sender = null;
if(window.XMLHttpRequest){
sender = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari
}else{
sender = new ActiveXObject('Microsoft.XMLHTTP'); //IE6,IE5
}2、连接服务器
在这里会用到 open() 方法。open() 方法有三个参数,第一个参数是连接方法即 GET 和 POST,第二
个参数是 URL 即所要读取数据的地址,第三个参数是否异步,它是个布尔值,true 为异步,false 为同步。
sender.open('GET', url, true);3、发送请求
send() 方法。
sender.send();
4、接收返回值
onreadystatechange 事件。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState:请求状态,返回的是整数(0-4)。
0(未初始化):还没有调用 open() 方法。
1(载入):已调用 send() 方法,正在发送请求。
2(载入完成):send() 方法完成,已收到全部响应内容。
3(解析):正在解析响应内容。
4(完成):响应内容解析完成,可以在客户端调用。
status:请求结果,返回 200 或者 404。
200 => 成功。
404 => 失败。
responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串。
sender.onreadystatechange=function(){
if(sender.readyState==4){
if(sender.status==200){
var file = sender.responseText;
}
}
};测试范例:
ClassLoader.loadScriptSync = function(){
if(arguments.length == 0){
return
}
var clsName;
if(arguments.length == 1){
clsName = arguments[0];
if(ClassLoader.cacheScript[clsName]){
return
}
}
//1、获取XMLHttpRequest对象
var sender = ClassLoader.createNewTransport();
var temp = new Date().getTime()
var method = "GET"
var url = clsName
var reqString = ""
if(typeof clsName == "object" && clsName.length > 0){
method = "POST"
url = "*"
reqString = clsName.join("&_")
}
//2、连接服务器
sender.open(method, url + ".js?temp=" + temp, false)
sender.setRequestHeader('encoding' , 'utf-8');
try{
//3、发送请求到服务器
sender.send("")
}catch (e){
alert(e)
}
//4、接收返回值
if(sender.readyState == 4){
if(sender.status == 200){
var file = sender.responseText
if(file.length == 0){
return;
}
ClassLoader.markCache(clsName);
try{
ClassLoader.eval(file);
}catch(e){
throw e;
ClassLoader.clearCache(clsName);
if(ClassLoader.debug){
alert(clsName + " script file error : /r" + e.toString())
}
}
}
} else {
if(ClassLoader.debug){
alert(clsName + " class file load failed")
}
}
//5、终止ajax请求
sender.abort();
}
相关推荐
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
时光如瑾雨微凉 2020-07-19
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05