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
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05