同步和异步(基于服务端和客户端)
同步;客户端发送请求后,在服务端对请求处理期间,客户端不能进行任何操作
异步:客户端发送请求后,在接收到服务端响应的同时,客户端能进行其他操作
实现ajax(原生版)
- Js原生版实现
- Jquery实现
Js原生版实现
1 创建XMLHttpRequest对象
2 然后用这个对象操作open()方法 即 XMLHttpRequest.open("post",url,true);
3 用这个对象操作onreadystatechange这个属性 即XMLHttpRequest.onreadystatechange=callback; //指定响应函数
onreadystatechange=函数名; //注意这里直接加函数名,而不是function(),否则函数将无法正常执行
4 用这个对象操作send()方法 即 XMLHttpRequest.send(null);
正确的顺序 1 3 2 4
先创建
再设置属性
然后打开
最后发送
代码示例:
//创建对象
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//与服务器建立连接
var open = xmlHttp.open("GET", "/ajx.html?username=lilei", true);
//发送请求
xmlHttp.send();
//回应
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
代码示例:
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//1.定义json对象
var user = {
"对象的属性" : "属性的值"
};
$(function() {
$("#json").html(
"<ul><li>编号:" + user.id + "</li><li>用户名:" + user.username
+ "</li><li>密码:" + user.pwd + "</li></ul>");
});
</script>
</head>
<body>
<div id="json">
<!-- <ul><li>编号:001</li><li>用户名:001</li><li>密码:001</li></ul> -->
</div>
</body>