jsp_ajax

同步和异步(基于服务端和客户端)

同步;客户端发送请求后,在服务端对请求处理期间,客户端不能进行任何操作

异步:客户端发送请求后,在接收到服务端响应的同时,客户端能进行其他操作

实现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>

 

发布了45 篇原创文章 · 获赞 0 · 访问量 1910

猜你喜欢

转载自blog.csdn.net/weixin_41804367/article/details/90050268