学ajax基础,原生js学习笔记——Ajax基础

1.什么是Ajax

Ajax：是Asynchronous Javascript And XML的简写，即异步JavaScript和XML

XMLHttpRequest 提供的异步，是指基于ajax的应用在服务器中的通信方式。

传统的 web应用，每次用户向服务器请求获得新数据时，浏览器都会丢弃当前页面，而等待重新加载新的页面。这样一来，在服务器完全响应之前，用户浏览器将一片空白，用户的动作必须中断。而异步指用户发送请求后，完全无需等待，请求会在后台发送，不会阻塞用户当前活动。这样一来，用户无须等待第一次请求得到完全响应，就可以发送第二次请求。借用网上一张图来说明：

用途：动态刷新局部数据，无需下载整个页面，从而带来更好的用户体验

Ajax核心：是JS对象XMLHttpRequest。该对象提供了异步发送请求的能力。它可以通过JS向服务器发送请求，处理服务器响应，避免阻塞用户动作。

2. XMLHttpRequest对象的方法与属性

2.1XMLHttpRequest 对象方法描述

(1)abort()停止当前请求

(2)getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回

(3)getResponseHeader("header")返回指定首部的串值

(4)open("method","URL",[asyncFlag],["userName"],["password"])建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。 这个方法还包括3个可选的参数，是否异步，用户名，密码

(5)send(content)向服务器发送请求

(6)setRequestHeader("header", "value")把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。 设置header并和请求一起发送('post'方法一定要).

2.2.XMLHttpRequest 对象属性描述

(1)onreadystatechange状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数. onreadystatechange属性存有处理服务器响应的函数

xmlHttp.onreadystatechange=function()

{

//代码

}

(2)readyState，readyState表示HTTP请求的运行状态，有5个可取值：

0 (未初始化)对象已建立，但是请求尚未初始化(尚未调用open方法)

1 (初始化)对象已建立，请求已提出，尚未调用send方法

2 (发送数据) send方法已调用，请求已经发送，但是当前的状态及http头未知

3 (数据传送中)已接收部分数据，请求已经处理中，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成)数据接收完毕,请求已经完成，此时可以通过通过responseXml和responseText获取完整的回应数据

(3)responseText服务器的响应，返回数据的文本。

(4)responseXML服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象。

(5)responseBody服务器返回的主题(非文本格式)

(6)responseStream服务器返回的数据流

(7)status则表示了HTTP所请求数据的状态[常见的反馈码](如：404 = "文件末找到"、200 ="成功"，等等)

(8)statusText服务器返回的状态文本信息 ， HTTP状态码的相应文本(OK或Not Found(未找到)等等)

3.一个XHR建立一个典型的AJAX请求的四步骤：

第一步：new一个XHR对象

第二步：调用open方法

第三步：send()方法，发送一些信息

第四步：监听onreadystatechange()事件，主要插入成功后要做的事情

具体代码：

第一步：  // IE浏览器

if(ActiveXObject){

// 微软目前AJAX最新版本

var xmlhttp = new ActiveXObject("Msxm12.XMLHTTP.6.0");

}else{

// 主流浏览器

var xmlhttp = new XMLHttpRequest();

}

第二步：  // 创建HTTP请求

// open(method, url, asynchronous, user, password);

// method：请求方法(post，get)

// url：请求地址(是具体要接收数据的地址)

// asynchronous：同步或异步请求(true是异步，false是同步，默认是true，可不填)

// user：(指定请求用户名，可不填)

// password：(指定请求密码，可不填)

xmlhttp.open('get','url');   //open()方法并不会真正发送请求，而只是启动一个请求以备发送。

第三步： // 如果用的是post方式请求，要在send之前设置HTTP头

xmlhttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

send(content);

// 发送请求，content是要发送的内容，一般post方式需要发送内容写在send的参数里，如果没有则填null，send()方法接收一个参数，是向请求主体发送的数据，如果不需要向请求体发送数据，则参数就为null,调用send()后，请求就会被分派到服务器。

第四步：xmlhttp.onreadystatechange = function(){

if((xmlhttp.readyState==4) && (xmlhttp.status)==200){

alert(xmlhttp.responseText); // 返回的数据内容

}else{

alert('请求失败');

}

}

4.Ajax运行机制

首先创建一个xmlHttpRequest的对象之后xmlHttp.readyState的值是0了，然后xmlHttp.onreadystatechange = handlestatechange没有运行。紧接着是open()，这个函数发生了之后xmlHttp.readyState的值是1了，那么就会有一个断点在open()函数处断开，保留现场，紧接着又返回到xmlHttp.onreadystatechange = handlestatechange运行，然后再执行Send()函数，这个函数发生了之后xmlHttp.readyState的值是2了，接着又返回到xmlHttp.onreadystatechange = handlestatechange运行。

异步的ajax实际上使用了单独的进程，因此你无法获取到这个返回值，而且，在你调用ajax()方法时你根本无法知道它什么时候会执行完毕。因此，只能提供回调方法，ajax对象可以将参数传递到你提供的回调方法中。

5.实例：//验证表单中的用户名是否已经存在function checkName(){

var namevalue=ele.name.value;

if(namevalue==""){

ele.imgs[0].setAttribute("width","30px");

ele.imgs[0].setAttribute("height","30px");

ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标

ele.imgs[0].style.display = "inline"; //显示

biaoqian1.innerHTML='用户名不能为空';

return false;

}

else{

//这个是使用get方式向后台传递数据的参数写在url后面,使用时间戳或随机数来确保无缓存的请求数据.

var url='http://localhost/chkname.php?username='+namevalue+'&'+'t='+new Date()*1;

//使用post方式的url

// var url='http://localhost/chkname.php';

var cb = ajaxResultdeal;  //处理响应信息的回调函数

toAjax(url,cb)

}

}

function toAjax(url,callback){

var namevalue=ele.name.value;

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange =function(){

if(xmlhttp.readyState == 4){

if(xmlhttp.status == 200){

if(callback) {

callback(xmlhttp.responseText);

}

}

}

}

//发送数据，开始与服务器进行交互

//post发送请求  是因为PHP中的$_POST['key']方法，需要用到键值对的格式，

因此必须申明请求头部：setRequestHeader('Content-Type','application/x-www-form-urlencoded') 以表单提交数据的方式来发送数据到服务器。

xmlhttp.open('POST',url,true);

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");       xmlhttp.send("username="+namevalue);

//get发送请求

/*xmlhttp.open('GET',url,true);

xmlhttp.send(null);*/

}

var ajaxResult = false;//全局变量

//处理响应的回调函数

function ajaxResultdeal(response){

ajaxResult = response; //传递给全局变量

if(ajaxResult == '1'){

ele.imgs[0].setAttribute("width","30px");

ele.imgs[0].setAttribute("height","30px");

ele.imgs[0].setAttribute("src","img/right.jpg"); //对应图标

ele.imgs[0].style.display = "inline"; //显示

biaoqian1.innerHTML="";

ajaxResult= true;

}

else{

ele.imgs[0].setAttribute("width","30px");

ele.imgs[0].setAttribute("height","30px");

ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标

ele.imgs[0].style.display = "inline"; //显示

biaoqian1.innerHTML='该用户名已经存在';

ajaxResult=false;

}

ajaxResultreturn(); //用这个函数来返回表单中的name项，返回真还是假，用于提交表单前的验证函数。

}

function ajaxResultreturn(){

if(ajaxResult){return true;}

else{

return false;

}

}

后台php,为了简单，没有从数据库取得数据，只是简单判断，页面对post，获得get 的请求的获得：

/*$username=$_POST['username'];*/ //已post提交的获得方式，

$username=$_GET['username'];//以get提交的获得方式

if($username=="11"){

$reback = '1';

echo $reback;

}

输入用户名为11时，页面实时返回效果图如：

输入其他用户名，则页面实时返回效果图：

5.总结

ajax的实现了：

1、页面无刷新，在页面内与服务器通信，给用户的体验非常好。

2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

自己根据基本知识，写了简单的注册，使用ajax技术判断用户名是否已经存在，分别使用了post方式，get方式，来进行传送，后期需要完善的，学习使用Json编码请求，以及学习跨源资源共享。