AJAX 介绍和应用
博客阐明
文章所波及的材料来自互联网整顿和集体总结,意在于集体学习和教训汇总,如有什么中央侵权,请分割自己删除,谢谢!
菜鸟教程地址
https://www.runoob.com/ajax/ajax-tutorial.html
简介
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种应用现有规范的新办法。
AJAX 最大的长处是在不从新加载整个页面的状况下,能够与服务器替换数据并更新局部网页内容。
AJAX 不须要任何浏览器插件,但须要用户容许 JavaScript 在浏览器上执行。
异步和同步
客户端和服务器端互相通信的根底上
- 客户端必须期待服务器端的响应。在期待的期间客户端不能做其余操作。
- 客户端不须要期待服务器端的响应。在服务器解决申请的过程中,客户端能够进行其余的操作。
实现形式
应用 js
//1. 创立外围对象
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");
}
//2. 建设连贯
/*
参数:1. 申请形式:GET、POST
* get 形式,申请参数在 URL 后边拼接。send 办法为空参
* post 形式,申请参数在 send 办法中定义
2. 申请的 URL:3. 同步或异步申请:true(异步)或 false(同步)*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3. 发送申请
xmlhttp.send();
//4. 承受并解决来自服务器的响应后果
// 获取形式:xmlhttp.responseText
// 什么时候获取?当服务器响应胜利后再获取
// 当 xmlhttp 对象的就绪状态扭转时,触发事件 onreadystatechange。xmlhttp.onreadystatechange=function()
{
// 判断 readyState 就绪状态是否为 4,判断 status 响应状态码是否为 200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// 获取服务器的响应后果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
应用 jquery
$.ajax 实现
$.ajax({
url:"ajaxServlet1111" , // 申请门路
type:"POST" , // 申请形式
//data: "username=jack&age=23",// 申请参数
data:{"username":"jack","age":23},
success:function (data) {alert(data);
},// 响应胜利后的回调函数
error:function () {alert("出错啦...")
},// 示意如果申请响应呈现谬误,会执行的回调函数
dataType:"text"// 设置承受到的响应数据的格局
});
$.get 发送 get 申请
- 语法:$.get(url, [data], [callback], [type])
- 参数:
url:申请门路
data:申请参数
callback:回调函数
type:响应后果的类型
$.post() 发送 post 申请
- 语法:$.post(url, [data], [callback], [type])
- 参数:
url:申请门路
data:申请参数
callback:回调函数
type:响应后果的类型
感激
菜鸟教程
黑马程序员
万能的网络
以及勤奋的本人