文章目录
Ajax
1 简介
- Ajax:异步的JavaScript 和 XML ( Asynchronous JavaScript and XML)
- 不是一门新的编程语言,而是一种使用现有标准的新方法
- 可以在不更新当前页面的情况下向服务器发出请求
- 无需重新加载整个网页的情况下,能够更新部分网页的技术。
2 技术
- 使用CSS和XHTML来表示。
- 使用DOM模型来交互和动态显示。
- 使用XMLHttpRequest来和服务器进行异步通信。
- 使用javascript来绑定和调用。
3 工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。
并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
4 XMLHttpRequest 对象
4.1 常用属性
- onreadystatechange 属性:存有处理服务器响应的函数。
xmlHttp.onreadystatechange = function() { //我们需要在这写一些代码}
- readyState属性:存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。
状态 | 描述 |
---|---|
0 | 请求未初始化(在调用open()之前) |
1 | 请求已提出(在调用send()之前) |
2 | 请求已发送(从响应中得到内容头部) |
3 | 请求处理中(响应中有部分数据可用,但是服务器还没有完成响应) |
4 | 请求已完成(可以访问服务器响应并使用它) |
function demo() {
/* 测试xmlhttprequest的响应码 */
// 创建此对象
var xhtml = new XMLHttpRequest();
var val = document.getElementById("username").value;
document.write("open前readystate的值为:"+xhtml.readyState+"<br>");
// 请求初始化
xhtml.open("get","http://localhost:8888/DemoAjax/loginservlet?username="+val,true);
// 发送请求
document.write("send前readystate的值为:"+xhtml.readyState+"<br>");
xhtml.send(null);
// 接受响应函数
xhtml.onreadystatechange = function () {
if (xhtml.readyState == 4) {
window.alert(xhtml.readyState)
window.alert(xhtml.responseText);
} else {
window.alert(xhtml.readyState);
window.alert("hahahha")
}
}
}
-
responseText属性
可以通过该属性获取从服务其返回来的数据。
// 接受响应函数 xhtml.onreadystatechange = function () { if (xhtml.readyState == 4) { window.alert(xhtml.readyState) window.alert(xhtml.responseText); } else { window.alert(xhtml.readyState); window.alert("hahahha") } }
-
其他 服务器返回响应时,返回到提交页面
属性 描述 onreadystatechange 状态改变的事件触发器,通常会调用一个函数 readyState 请求的状态(0,1,2,3,4) responseText 服务器的响应,返回数据的文本 responseBody 服务器返回的主体(非文本格式) responseStream 服务器返回的数据流 responseXML 服务器返回数据兼容DOM的XML文档,可以解析为一个DOM对象 status 服务器的HTTP状态码 statusText 服务器返回的状态文本信息 4.2 常用方法
-
open(method,url,async) 方法
open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL,第二个参数规 定应当对请求进行异步地处理。
xmlHttp.open("GET","test.php",true);
- send(string) 方法 string:仅用于post方法
send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录,那么代码是这样的:
xmlHttp.send(null);
-
get 还是 post?
与post相比,get更简单也更快,并且在大部分情况下都能使用
以下情况使用post:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量的请求(post没有数据量限制)
- 发送包含未知字符的输入时,post比get更稳定可靠
-
使用get请求:请向 url 中添加信息
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
- post请求:if需要向表单那样post数据,则必须使用setRequestHeader()来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。
因为对于get请求来说,它的值是拼接在地址栏上上的,默认编码是ascll码。对于post请求,数据是在请求体中,所以,必须指定form表单提交的数据类型。
请求的默认编码是:"Content-type","application/x-www-form-urlencoded"
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
-
异步 true or false ?
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
xmlhttp.open("GET","ajax_test.asp",true);
对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。
通过异步,无需等待服务器的响应:
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
当使用异步时:请规定响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
5 ajax 编程步骤
- 创建XMLHttpRequest对象
- 设置请求方式
- 调用回调函数(异步时,设置就绪状态的函数)
- 发送请求
5.1 创建对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
所以为了应对所有的浏览器,应该检查浏览器是否支持此对象。
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");
}
5.2 设置请求方式
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CkKEOOL8-1604485021088)(C:\Users\12454\AppData\Roaming\Typora\typora-user-images\image-20201027203315743.png)]
5.3 调用回调函数
//第三步:注册回调函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
} else {
alert("AJAX服务器返回错误!");
}
}
}
5.4 发送请求
//第四步:设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" + Math.random();
// 增加time随机参数,防止读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
// 向请求添加 HTTP 头,POST如果有数据一定加加!!!!
xmlHttp.send(params); // 数据间用&连接
6 jQuery的Ajax操作
6.1 原生js的不足
- 步骤繁琐
- 方法属性常用值较多,不便于记忆
6.2 ajax()方法
<%-- 采用jquery的方式写 --%>
<script>
$(function () {
$("#aa").blur(function () {
let val = $(this).val();
$.ajax({
url:"/DemoAjax/loginservlet",
type:"get", // 默认是get
data:"username="+ val,
dataType:"text", // 预期的服务器响应数据类型
success:function (result) { // result 返回的数据
$("#tt").html(result);
},
error:function () {
$("#tt").html("不直到啥原因错误!");
}
})
});
});
</script>
- 语法
$.ajax({name:value, name:value, ... })
// 里面是键值对的形式
- 常见的键与值
键名称 | 键值 |
---|---|
url | 规定发送请求的 URL。默认是当前页面。 |
type | 规定请求的类型(GET 或 POST)。 |
data | 规定要发送到服务器的数据。 |
dataType | 预期的服务器响应的数据类型。 |
contentType | 发送数据到服务器时所使用的内容类型(见上面post) |
success(result,status,xhr) | 当请求成功时运行的函数。 |
async | 布尔值,表示请求是否异步处理。默认是 true。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
6.3 jQuery的get方法
通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。
$.get(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
//url, data, callback, type
});
/* 简便的方式 url data 回调函数 dataType*/
$.get("/DemoAjax/loginservlet","username="+ val,function (result) {
$("#tt").html(result);},"text");
6.4 jQuery的post()方法
$.post(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});
/* post方法 */
$.post("/DemoAjax/loginservlet","username="+val,function (result) {
$("#tt").html(result);
},"text");