了解一下ajax
AJAX：是一种无需重新加载页面的情况下能够更新部分（局部更新）网页的技术。
1. 概念：ASychronous JavaScript And XML 异步的JavaScript和XML
首先了解一下异步和同步的区别。
异步：客户端发送请求到服务器，无论服务器是否返回响应，客户端都可以随意做其他的事情，中间的过程并不影向其他操作。
同步：客户端发送请求给服务器端，当服务器返回响应之前，客户端在此期间什么事情都不可以做，只能处于等待状态（卡死）。
- AJAX运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。
实现方式：
1.js实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现ajax</title>
<script>
function fun() {
var ajaxServlet;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
ajaxServlet=new XMLHttpRequest();
}
else
{// code for IE6, IE5
ajaxServlet=new ActiveXObject("Microsoft.XMLHTTP");
}
ajaxServlet.onreadystatechange=function(){
if(ajaxServlet.readyState==4){//代表已接收后台数据，这时进行数据处理
var result = ajaxServlet.responseText;
var mydiv = document.getElementById("mydiv");
mydiv.innerHTML=result;
}
}
//建立连接 第一个参数是请求方式，第二个是URL，第三个参数true代表异步，false同步
ajaxServlet.open("GET","ajaxServlet?username=jerry",true);
//发送xmlhttp请求
ajaxServlet.send();
}
</script>
<style>
#mydiv{
border: 1px solid black;
width: 120px;
height: 50px;
}
</style>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();"><br/>
<div id="mydiv">
</div>
</body>
</html>XMLHttpRequest 对象用于和服务器交换数据。
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true;例如：
xmlhttp.open("GET","ajax_test.asp",true);不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息
2.jQuery实现
1. $.ajax({key1:value1,key2:value2,….})方法
常用的一些选项：async:true,代表异步处理，默认就是true，URL：“资源路径”，data：{参数1=“值1”…}，dataType:"json",参数返回类型，type：post/get,提交方式，success:function(){}；响应成功后执行的函数，error：function(){},响应失败执行的函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery_ajax2</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
function fun(){
$.ajax({
url:"ajax",
data:{"content":"今天天气真不好！","name":"margin"},
async:"true",//默认为true，异步
type:"post",//默认get提交
dataType:"text",//返回类型
success:function (data) {
document.getElementById("div1").innerHTML = data;
},//响应成功，执行success
error:function () {
var div1 = document.getElementById("div1");
div1.innerHTML="服务器忙碌中，请稍后重试！";
}//执行失败，error对应的函数执行
})
}
</script>
<style>
#div1{
width: 220px;
height: 150px;
border: 2px solid black;
}
</style>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();"><br/>
<div id="div1">
</div>
</body>
</html>2.$.get(url,data,callback,type); 第一个参数是访问的地址，第二个参数是传递的参数，第三个参数是写执行成功后的回调函数，第四个代表服务器返回的参数文本类型，常用的有json,text等。
function fun() {
$.get("ajaxServlet",{username:"tom"},function (name) {
alert(name);
},"text");}
3.$.post(url,data,callback,type);jQuery通过post方法实现AJAX的方式和get方法相似，两者除了提交数据的方式不同，其余的使用方式基本一样。
function fun() {
$.post(
"ajaxServlet",
{username:"tom"},
function (name) { alert(name); },
"text");
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章