加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ajax学习

发布时间:2020-12-15 22:00:21 所属栏目:百科 来源:网络整理
导读:学习ajax,首先要了解同步和异步这两个概念,查了很多资料,我的理解是 同步是指客户端发送一个请求,必须等到该请求处理完成后,才能继续进行下一个操作。 异步则不用等到请求执行完,可以立刻马上继续下一个请求的发送处理。 大概的了解同步异步之后,说说

学习ajax,首先要了解同步和异步这两个概念,查了很多资料,我的理解是

同步是指客户端发送一个请求,必须等到该请求处理完成后,才能继续进行下一个操作。

异步则不用等到请求执行完,可以立刻马上继续下一个请求的发送处理。

大概的了解同步异步之后,说说ajax的原理,

ajax的原理:说白了,无非是客户端发送请求,然后获取服务端返回来的响应结果,完了,一句话。

但是,要真正的理解并运用ajax,就需要对ajax中的一些对象有所熟悉

XMLHttpRequest对象时ajax的核心,一切得从这个对象说起


创建这个对象


function CreateXmlHttp() {

//非IE浏览器创建XmlHttpRequest对象
if (window.XmlHttpRequest) {
xmlhttp = new XmlHttpRequest();
}

IE浏览器创建XmlHttpRequest对象if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
}
catch (ex) { }
}
}
}
 
这里针对不同的搜索引擎,创建xmlhttprequest对象的方式也不一样
创建完之后,
得知道xmlhttprequest对象中的几个中方法和属性
 
重要的方法有
open("1","2","3");
	"1"的值是指向服务器提交数据的类型,有get和post
	"2"中放入的是一个url地址和你要提交的初始参数
	"3"中的值是指定传输的方式(同步,异步),默认是true(异步)
这个方法比较关键
还有一个方法是
 
send();通过该方法来发送请求的
 
ajax中重要的属性有
 
onreadystatechange:xmlhttprequest对象状态发生改变时所触发的事件
 
responseText/xml:服务器返回的数值,可以是字符串和xml文件
 
status:从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

readyState:对象状态值,4是表示完成了(数据接收完毕)
 
function ComeBack() {

var data = document.getElementById("data").value;
CreateXmlHttp();
if (!xmlhttp) {
alert("创建xmlhttp对象异常!");
return false;
}

xmlhttp.open("POST",url,false);

xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
alert(responseText);
}
}
}
xmlhttp.send();
}

以上就实现了一个ajax的过程,说简单点就是,客户端发送一个请求,然后等待结果,就ok了
 
当然开始的时候会觉得比较乱,,但到后面会接触到一个json的东西,就会发现更加的简单了.
 
选下面来说说json
 
json的使用需要导入一个jquery.js的文件到页面上
<script type="text/javascript" src="<%=path %>/admin/js/jquery-1.7.2.min.js"></script>
 
然后调用里面的一个方法
	get(url,function(result){},"json")
	url为发送的地址,function为一个内部类,处理你接下来要干的事,result为服务端传过来的数据
	json为数据的格式(貌似不用管它的),
 
	类似的还有post(url,function(result){},"json");方法,使用和get一样,但是还是有点差别	的,自己去找点资料吧
 
			jQuery.get(url,function(result){
				//alert(result);
				if(result=="true"){
					//alert("可以登陆了");
					form.submit();
				}else if(result=="error"){
					alert("用户名或密码错误,请重新输入!");
				}else if(result=="fengting"){
					alert("该用户已经被封!")
				}
			},"json");
 
最后,说下ajax的优点和缺点:
我个人认为优点有
1.不用刷新页面就可以实现客户端与服务端之间的通信,这点给客户带来了很好的体验效果。
2.使用异步的发送方式,使得客户发送完一个请求后可以继续进行下一个的操作。
3.减轻了服务端的负担
 
缺点有:
1.支持ajax的搜索引擎方面显得比较薄弱
2.使用ajax不是很安全,会暴露很多的数据和服务器逻辑。
 
可能写的不是很全,但至少还是总结出来了,不足的地方希望大神给点意见,还有一点申明下,有些地方多少借鉴了下。。。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读