ajax

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);