ajax概念
1.概念:
Ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
ajax:Asynchronous JavaScript and XML(异步js和XML)
异步js:js的代码都是至到而下执行的,如果一块代码没有执行完毕,那后面的代码就不会执行。异步就是ajax可以做到不按顺序执行
XML:存储数据的一种格式
陈学辉
18
356985332
kaivon@126.com
ajax不光能够处理XML格式的数据,还可以处理json、数组、字符串类型的数据
2. ajax到底能干嘛
js与后端进行数据交互的一种技术,通过请求协商好的接口,来获取到想要的数据
3. 优点
传输数据时候会在本页面请求服务器,不用跳转页面,从而减轻服务器压力。做到实时验证,减少用户返工率并且优化用户体验
ajax数据交互流程
1、创建一个ajax对象 买了一个电话
2、填写请求地址 输入号码
3、发送请求 拨号
4、等待服务器响应 等待
5、接收数据 通话
例:
window.onload=function(){
var inputs=document.querySelectorAll("input");
inputs[2].onclick=function(){
var val=inputs[0].value;
//1、创建一个ajax对象
var ajax=new XMLHttpRequest;
//2、填写请求地址
ajax.open('get','php/get.php?user='+val,true);
//3、发送请求
ajax.send();
//4、等待服务器响应
ajax.onload=function(){
//5、接收数据
var span=document.querySelector("span");
span.innerHTML=ajax.responseText;
};
};
};
用户名:
密码:
ajax请求后响应返回的结果
例:
window.onload=function(){
var inputs=document.querySelectorAll("input");
inputs[2].onclick=function(){
var val=inputs[0].value;
//1、创建一个ajax对象
var ajax=new XMLHttpRequest;
//2、填写请求地址
ajax.open('get','php/get_json.php?user='+val,true);
//3、发送请求
ajax.send();
//4、等待服务器响应
ajax.onload=function(){
//5、接收数据
var span=document.querySelector("span");
//ajax请求过来的数据都是字符串,它不能用对象的操作方法 直接操作
//console.log(typeof ajax.responseText); //string
var result=JSON.parse(ajax.responseText);
//把请求过来的数据转换成对象
//console.log(result)
//span.innerHTML=ajax.responseText;
if(result.code==0){
alert('注册吧,你还真蒙对了');
}else{
alert('换一个吧');
}
};
};
};
用户名:
密码:
ajax对象 XMLHttpRequest
/*
* var ajax=new XMLHttpRequest;
*
*/
/*var ajax=new XMLHttpRequest;
alert(ajax); //在IE6下会报错*/
var ajax=null;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest;
}else{
ajax=new ActiveXObject('Microsoft.XMLHTTP');
}
alert(ajax);