Ajax含义:
1、Ajax的全称:Asynchronous JavaScript and XML(异步的JavaScript和XML)他并不是新的编程语言,而是几种原有技术的结合体。
优点:
1、通过异步刷新,提升了用户体验。
2、优化浏览器和服务器之间的传输,减少不必要的数据返回,减少了带宽占用。
3、ajax引擎在客户端运行,承担了一部分由服务器承担的工作,从而减少大量用户下的服务器负载。
缺点:
1、不支持浏览器的回退按钮。
2、安全问题ajax暴露于服务器交互的细节。
3、对搜素引擎的支持比较弱。
如何使用ajax
完整实现按一个ajax的异步调用和局部刷新三步骤:
1、创建XMLHttpRequest对象,也就是创建一个异步调用对象 ---- 创建XMLHttpRequest
2、创建一个新的http请求,并执行该http请求的方法,url 地址 ---- 发送ajax请求
3、设置相应http请求状态变化的函数 ---- 处理服务器响应
创建ajax对象
document.getElementById('btnLoad').onclick=function(){
//1.创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
//IE7+ firfox chrome opera safari
xmlhttp = new XMLHttpRequest();
} else {
//ie6 ie5..
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlhttp);
发送ajax请求
1、创建请求:xmlhttp.open(‘GET’,“URL地址”,true);
2、发送到服务器xmlhttp.send();
//2.发送ajax请求
xmlhttp.open("GET","http://192.168.10.40:8080/content",true);
xmlhttp.send();
处理服务器相应
1、xmlHttp.onreadystatechange()事件用于监听Ajax执行过程
2、 xmlHttp.readystate属性说明的是XMLHttpRequest当前的状态
① Readystate =0 – 请求未初始化
② Readystate =1 – 服务器连接已经建立
③ Readystate =2 – 请求已经被接收
④ Readystate =3 – 请求正在处理
⑤ Readystate =4 – 响应文本已被接收
3、xmlHttp.status属性服务器响应的状态码,200:成功 404:未找到。。。
//3.处理服务器响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var t = xmlhttp.responseText;
document.getElementById('divContent').innerHTML=t;
}
}
利用Ajax实现新闻列表展现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
//1.创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlhttp);
//2.发送ajax请求
xmlhttp.open("GET","http://192.168.10.40:8080/news_list",true);
xmlhttp.send();
//3.处理服务器响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var t = xmlhttp.responseText;
console.log(typeof t);//string
var json = JSON.parse(t);
console.log(json);
var html = "";
for(var i=0;i<json.length;i++){
var news = json[i];
html=html+"<h1>"+news.titile+"</h1>";
html=html+"<h2>"+news.date+" "+news.source+"</h2>";
html=html+"<hr/>"
}
document.getElementById("container").innerHTML=html;
// document.getElementById('divContent').innerHTML=t;
}
}
</script>
</html>
GET和POST的区别
与POST相比,GET更简单也更快,并且再大部分情况下都能用,然而,再以下情况中,必须使用POST请求:
1、无法使用缓存文件(更新服务器上的文件或数据库)
2、向服务器发送大量数据(POST没有数据量限制)
3、发送包含未知字符的用户输入时,POST比GET更稳定,也更可靠
同步和异步的区别
true代表异步执行
请求通过事件触发->服务器处理(这时浏览器仍然可以做其他事情)->处理完毕
false 代表同步执行
请求提交->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事情
async是一个布尔值,如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作
总结:
1、对于同步执行,相当于代码进入了一个等待状态,数据不返回,程序就不会继续往下执行。
2、而异步状态下,ajax是不会处于代码的阻塞状态,程序任然会继续往下执行的,但是数据返回通过触发onreaystatechange事件进行获取和处理的。