浅析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创建请求
/*参数说明： method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法 ，常用的方法为get和post。 URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。 该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php（在传回响应之前，能够在服务器上执行任务）。 flag：该参数为可选参数，参数值为布尔型。该参数用于指定是否使用异步方式。 true表示异步方式、false表示同步方式，默认为true。 name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。 password：该参数为可选参数，用于输入密码。 XMLHttpRequest.open(method,URL,flag,name,password); //例 xhr.open('get','2.py?username=tom&pwd=123');- 如果是get请求，参数需要附加到url里
-
第三步，发送请求
- 如果是get请求，send参数可以为空；
- 如果为post请求，参数必须在send参数中传递，参数格式和url中设置的一样
- 如果为post方式需要在send前，设置请求头信息：xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
//get方式 xhr.send(null); //post方式 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) { //1.通过eval将json字符串转换为对象 // var obj = eval('('+xhr.responseText+')'); // console.log(obj); //2 使用json.parse将json字符串转换为对象 obj = JSON.parse(this.responseText); console.log(obj); } };- JSON字符串和JSON对象的转换
//json字符串 ==> json对象 var obj = JSON.parse(json字符串); //或者 var obj = eval('(' + json字符串 + ')'); //json对象转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
// 把注册码写到regist_code标签中
let regist_code_span = document.getElementById('regist_code')
regist_code_span.innerHTML = regist_code
}
{2} 异步ajax请求,get请求:
var xhr = new XMLHttpRequest();
// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function(){
// 通信成功时，状态值为4,状态码为200
if (xhr.readyState === 4 && xhr.status === 200) {
//xhr.response指接收到的responseText字符串
var data=JSON.parse(xhr.responseText);
console.log(data)
}
else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET', '/endpoint', true);
// 发送HTTP请求
xhr.send(null);
{3} 同步ajax请求,post请求
var name = encodeURI("北京西");
var data = "username=" + name + "&password=123";
//调用send()函数
send(data);
function send(arg) {
CreateXMLHttpRequest();
xmlhttp.onreadystatechange = callhandle;
//xmlhttp.open("GET","Default.aspx?goback=yes&arg=" + arg,true);
xmlhttp.open("POST", "http://172.16.5.25:9011/dynamicStation/loginByAdmin", true);
//用POST的时候一定要有这句
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
