1、什么是ajax?
asynchronous Javascript and XML,即异步的JavaScript和XML
ajax是一种页面无刷新的技术,也称之为局部刷新技术
2、ajax的优点和缺点?
优点:1)、在不重新加载整个页面的情况下,就可以与服务器交换数据并更新网页的内容
2)、将一些后端工作转移到前端,减轻服务器的压力
3)、支持异步通信,即无需等待请求执行完即可进行下一步操作
缺点:1)、ajax干掉了back和history功能,即对浏览器机制的破坏
2)、对搜索引擎支持较弱
3)、破坏程序的异常处理机制
4)、ajax给用户带来良好的体验的同时,也带来新的安全威胁。即ajax技术如同对企业数据建立了一个直接通到
这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑
3、ajax工作原理
相当于在客户端和服务器端之间加了一个抽象层(ajax引擎)
使得用户请求和服务器响应异步化,并不是所有的请求都提交给服务器
像一些数据验证和数据处理都交给ajax引擎来完成,只有确认需要向服务器读取更新数据时才用ajax引擎向服务器提交请求。
4、ajax和传统的网页相比
ajax可以使网页实现异步更新,意味着不重新加载整个网页的情况下,对网页的某部分进行更新
传统的网页:如果需要更新内容,必须重新加载整个网页页面
5、ajax的核心:XMLHttpRequest对象
1)、ajax的核心只有JavaScript、XMLHttpRequest和DOM
传统的交互方式:用户触发一个HTTP请求到服务器,服务器对其进行处理后再返还一个新的HTML页面到客户端。
每当服务器处理客户端提交的请求时,客户都只能空闲等待,哪怕是一次很小的交互。都要返回一个完整的HTML页
这样浪费了大量的用户等待时间。
2)、XMLHttpRequest:用于在后台与服务器进行数据交换,创建XMLHttpRequest对象如下:
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
如果需要将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法
语法:xmlhttp.open("请求方式","请求url","是否异步");
xmlhttp.send();
如:xmlhttp.open("get","ajax.txt",true);
xmlhttp.send();
1)、请求方式分为:get请求和post请求
get:更简单更快速
向服务器发送数据时,有数据量大小限制,不能大于2kb
安全性较低
post:没有数据量限制,一般默认为不受限制
安全性较高
2)、异步的同步区别:
当async=false时,可以不写onreadystatechange函数,只需要将代码写在send语句后面即可。‘如下:
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
7、XMLHttpRequest对象的三个重要属性
1)、onreadystatechange:存储函数,每当readyState属性改变时,就会调用该函数
2)、readyState:存储XMLHttpRequest的状态值
0:表示请求未初始化
1:服务器连接
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
3)、status: 200----服务器响应正常
400---无法找到请求的资源
404---需要访问的资源不存在
304---该资源在上次请求之后没有任何修改(通常用于浏览器的缓存机制)
500---服务器内部错误
8、ajax入门示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax测试1</title>
<script type="text/javascript">
function ajaxChange(){
//1.创建一个xmlhttp;
var xmlhttp;
//判断浏览器类型,不同浏览器创建xmlhttp的方法不一样
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest(); //chrome、firefox、opera、safari、IE7
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE6、IE5
}
//当readyState改变时会触发onreadystateChange事件
xmlhttp.onreadystatechange=function(){
//readyState为xmlHttpRequest的状态,0:请求未初始化,1:服务器连接已建立
//2:请求已接收 3:请求处理中 4:请求已完成,且响应已就绪
//status为服务器状态码,200表示响应正常
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//responseText用户获取服务器的响应,以字符串的形式响应数据
document.getElementById("div1").innerHTML=xmlhttp.responseText;
}
}
//用于向服务器发送请求
//get为请求方式
//ajax_info.txt为url地址
//true为异步
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="div1">这是一个div,点击下面的按钮会通过ajax修改其内容</div>
<button οnclick="ajaxChange()">修改内容</button>
</body>
</html>