浅析ajax原理与用法
1 ajax原理
Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建动态网页的技术,目的
是显示动态局部刷新.通过XMLHttpResponse对象来向服务器发起异步请求,从服务器获取数据.
(1) 异步的javascript: 使用javaScript语言及功能向服务器发起请求,当服务器处理完请求之后,自动执行
javaScript回调函数.(客户端可以不需要等到服务器响应才能运行)
(2) XML是一种标记语言,是ajax与后台交互传输数据格式之一
(3) ajax只能向同源网站发起Http请求(端口,协议,域名都相同),跨域请求会报错
利用Ajax可以实现:
1 注册时,输入用户名自动检测该用户是否存在
2 登录时提示密码用户名错误
3 页面局部进行更新数据
2 XMLHttpResponse基本属性
(1) onreadystatechange 每次状态改变所触发事件的时间处理程序
(2) responseText 从服务器响应返回字符串形式数据
(3) responseXML 从服务器响应返回以XML(DOM兼容文档)数据对象
(4) response 从服务器返回对象:如json对象
(5) timeout 表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止
附: response类型由XMLHttpRequest.responseType属性的值决定
'': 字符串
'document': Document对象
'json': json对象
'text': 字符串
'blob': Blob对象,适合读取二进制文件
var ajax = new XMLHttpRequest();
ajax.open('GET', 'http://www.example.com/page.php', true);
var data = ajax.responseText;
data = JSON.parse(data); 将json字符串转json对象
var last=JSON.stringify(obj) 将json对象转字符串
3 ajax状态码
200, OK,访问正常
301, Moved Permanently,永久移动
302, Move temporarily,暂时移动
304, Not Modified,未修改
307, Temporary Redirect,暂时重定向
401, Unauthorized,未授权
403, Forbidden,禁止访问
404, Not Found,未发现指定网址
500, Internal Server Error,服务器发生错误
4 时间监听接口
onloadstart 请求发出
onprogress 正在发送和加载数据
onerror 请求失败
onload 请求成功完成
ontimeout 用户指定的时限到期,请求还未完成
onloadend 请求完成,不管成果或失败
5 ajax解析
-
第一步,创建ajax对象
- 高级浏览器,包括火狐、chrome、opera,ie7以上
var xhr = new XMLHttpRequest();
- 使用XMLHttpRequest对象的open创建请求
-
第三步,发送请求
- 如果是get请求,send参数可以为空;
- 如果为post请求,参数必须在send参数中传递,参数格式和url中设置的一样
- 如果为post方式需要在send前,设置请求头信息:xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
xhr.send(null);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('username=tom&pwd=123');
-
第四步,监听Ajax状态变化
向服务器发送请求的目的是为了获得服务器端的数据,要获得服务器端返回的数据,需要监听XMLHttpRequest的状态,每当XMLHttpRequest状态发生改变时,会触发事件onreadystatechange,我们可以编写onreadystatechange事件处理函数,获取服务器返回的数据。
- XMLHttpRequest对象的状态,可以通过属性readyState获取,公有以下5种状态:
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
- 当readyState值为4时,就可以获取返回数据了,但返回的数据是成功还是失败,需要根据http的状态码确定,XMLHttpRequest的status属性用于判断http的状态,200表示访问成功
xhr.onreadystatechange = function () {
if (4 == xhr.readyState) {
if (200 == xhr.status ) {
alert(xhr.responseText);
}
}
};
-
第五步,获取响应数据
- 可以通过XMLHttpRequest对象的responseText获取数据,现在已经不再使用responseXML获取数据了
- 客户端获取json数据
xhr.onreadystatechange = function () {
if (4 == this.readyState && 200 == this.status) {
obj = JSON.parse(this.responseText);
console.log(obj);
}
};
var obj = JSON.parse(json字符串);
var obj = eval('(' + json字符串 + ')');
var str=obj.toJSONString();
var str=JSON.stringify(obj);
6 原生javascript中ajax
{1} 同步ajax请求,get请求:
#定义一个触发函数fresh_code
function fresh_code() {
let xhr = new XMLHttpRequest()
xhr.open('get', '/api/v1/regist_code', false); false代表同步,true代表异步请求
xhr.send()
let regist_code = xhr.responseText
let regist_code_span = document.getElementById('regist_code')
regist_code_span.innerHTML = regist_code
}
{2} 异步ajax请求,get请求:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
var data=JSON.parse(xhr.responseText);
console.log(data)
}
else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.open('GET', '/endpoint', true);
xhr.send(null);
{3} 同步ajax请求,post请求
var name = encodeURI("北京西");
var data = "username=" + name + "&password=123";
send(data);
function send(arg) {
CreateXMLHttpRequest();
xmlhttp.onreadystatechange = callhandle;
xmlhttp.open("POST", "http://172.16.5.25:9011/dynamicStation/loginByAdmin", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlhttp.send(arg);
}
function CreateXMLHttpRequest() {
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
}
7 jquery中ajax
$.ajax({
type:'get',
url:'/studentsinfo',
dataType:'json',
success:function(data,status){
console.log(data)
var d=data['data']
for(var i=0;i<d.length;i++){
document.write('<p>'+d[i][0]+'</p>')
}
}
})
也可以直接使用$get 或者 $post