Ajax:异步的javascript and xml;(本文内容有部分是来自于js教程网)
Ajax的功能:AJAX 可以与服务器交换数据,在不重新加载(刷新)整个页面的情况下,更新部分页面。
Ajax的使用场景如:
-用户注册时,输入完用户名立即提交到后台验证,检测用户名是否存。
-静态页面实现登录功能。
-瀑布流的实现。
AJAX XMLHttpRequest对象:
XMLHttpRequest 对象用于在后台与服务器交换数据,能够在不重新加载整个网页(刷新)的情况下,对网页进行部分更新。
XMLHttpRequest 对象是 AJAX 的基础,讲 AJAX ,大部分是在讲 XMLHttpRequest 对象。
所有现代浏览器(IE 7.0+、Chrome、FireFox、Opera、Safari)均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
对于较新的浏览器,创建 XMLHttpRequest 对象的语法:
var xmlhttp=new XMLHttpRequest();
对于比较老的IE浏览器(IE5 和 IE6),使用 ActiveX 来创建:
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
兼容所有浏览器的创建 XMLHttpRequest 对象的代码:
复制纯文本新窗口
<script type="text/javascript">
var xmlhttp;
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
</script>
AJAX的流程:
1:创建ajax对象
2:与服务器建立连接 open()方法
3:发送请求(http协议) send()方法
4:返回数据
一个发送 AJAX 请求的完整代码:
<script type="text/javascript">
var xhr;
// 创建 XMLHttpRequest 对象
try{
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}catch(e){
// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
// 初始化请求参数
xmlhttp.open("GET","/demo/javascript/ajax/ajaxDemo.php?action=getIP",true);
// 发送请求
xmlhttp.send();
</script>
open() 方法用来初始化 HTTP 请求参数,但是并不发送请求。
语法: open(method,url,async)
参数说明:
method 必须参数。请求的类型,GET 或 POST。
url 必须参数。文件在服务器上的位置。
async 必须参数。是否异步发送请求,true(异步)或 false(同步)。
注意:AJAX 的强大之处在于异步请求,所以 async 一般设置为 true ,否则将失去意义
open()方法的提交数据方法get和post的区别:get方式提交的数据在url上显示,并且大小是有限制的,安全性不好。post方式是在http请求中传递,理论上数据有大小是限制的
,安全性较好。传递的多个值用&号来连接。
异步和同步的区别:同步是指代码要一步一步来执行,前面 的代码执行完了,后面的代码才可以执行,而异步是前面的代码不影响后面的代码的执行,后面的代码可以先执行。
其实ajax的交换过程和form表单的提交异曲同共之妙。