#Ajax简介
Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
- 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
- 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 。
##1.原生JavaScript写法:
原生js写ajax就像打电话
打电话分下面4步
1.拿出手机
2.拨号
3.说话
4.挺对方说话
ajax也分下面4步
1.创建ajax对象
2.连接到服务器
3.发送请求(告诉服务器我要什么文件)
4.接收返回值
#####readyState与status:
######readyState有五种状态:
0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
1 (载入):已经调用open() 方法,但尚未发送请求;
2 (载入完成): 请求已经发送完成;
3 (交互):可以接收到部分响应数据;
4 (完成):已经接收到了全部数据,并且连接已经关闭。
而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。status的状态有几十种,只列出平时常用的几种:
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误
####具体代码:
var xhr;
function rukou()//入口函数
{
xhr=getxhr();
if(xhr==null)
{
alert("浏览器不支持!");
}
var url="";
xhr.onreadystatechange=fanhui;
xhr.open("GET",url,true);
xhr.send(null);
}
function fanhui()//请求成功的回调函数
{
if(readyState==4)
{
document.getElementById("xx").innerHTML=xhr.responseText;
}
}
function getxhr()//获取xmlhttp对象
{
xhr=null;
try{
xhr=new XMLHttpRequest();
}
catch(e)
{//针对IE6,IE5.5,IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
##2.jQuery写法
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
//Ajax调用处理
var html = $.ajax({
type: "POST",
url: "xxx",
data: "name=garfield&age=18",
async: false
}).responseText;
$("#myDiv").html('<h2>'+html+'</h2>');
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
</body>
</html>
也可以
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
//Ajax调用处理
$.ajax({
type: "POST",
url: "test.php",
data: "name=garfield&age=18",
success: function(data){
$("#myDiv").html('<h2>'+data+'</h2>');
}
});
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
</body>
</html>
##注意:关于onload和ready
####1. DOM ready
- 用jQ的人很多人都是这么开始写脚本的:
$(function(){
// do something
});
其实这个就是jq ready()的简写,他等价于:
$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
文档加载的顺序:域名解析–>加载HTML–>加载JavaScript和CSS–>加载图片等非文字媒体文件。
####2、DOM load
- 文档加载的顺序:域名解析–>加载HTML–>加载JavaScript和CSS–>加载图片等非文字媒体文件。
DOM load在加载图片等非文字媒体文件之后,表示在document文档加载完成后才可以对DOM进行操作,document文档包括了加载图片等非文字媒体文件。
如需要等该图片加载完成,才可设置图片的属性或样式等。
在原生JavaScript中使用onload事件。
- window load:
window.onload = function() {
...
}
- 图片load:
document.getElementsByTagName("img")[0].onload = function() {
...
}