1.ajax介绍
Ajax(asynchronous JavaScript and XML):异步的JavaScript和xml,是一种异步请求数据的web开发技术,在不重新加载整个页面的情况下,可以与服务器交换数据并更新网页部分内容。Ajax目的是提高用户体验,较少的网络数据的传输量。
2.ajax原理
(1)浏览器创建一个XMLHttpRequest对象,然后发送对象去服务器请求数据;
(2)服务器接受XMLHttpRequest并返回数据;
(3)浏览器接受返回数据并渲染页面;
3.ajax是基于现有的internet标准
a.XMLHttpRequest 对象 (异步的与服务器交换数据)
b.JavaScript/DOM (信息显示/交互)
c.CSS (给数据定义样式)
d.XML (作为转换数据的格式)
注意: AJAX应用程序与浏览器和平台无关的!
4.原生js的ajax使用
//创建XMLHttpRequest对象
var xmlhttp=null;
if (window.XMLHttpRequest)
{// 兼容 IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else{// 兼容 IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//向服务器发送请求
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
注意:xmlhttp.open(method,url,async);
xmlhttp.send();
Method:请求的方式,get或者post
Url:请求路径
Async:是否异步,true(异步)false(同步)
但是当请求方式为post时要设置请求头的格式,举例:
xmlhttp.open("POST","test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(xxxx); //post请求参数放在send里
//浏览器对服务器响应进行处理
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
onreadystatechange存储函数,当readyState属性改变时,调用该函数。
readyState:存储XMLHttpRequest状态。
0:请求未初始化;
1:服务器连接已建立
2:请求已接受
3:请求处理中
4:请求已完成,且响应就绪
Status:常用状态码
200:’ok’
404:未找到页面
(根据菜鸟教程整理)