简谈ajax--使用ajax实现用户注册

1.XMLHttpRequest对象

  XMLHttpRequest是Ajax开发的基础，它提供客户端与服务器端进行异步通信的功能。一方面它向服务器提交一个请求，获取页面的内容；另一方面将数据通过JavaScript发送到服务器端后，按预期的方式对数据进行处理，结合XML和CSS，做出各种应用程序。

2.利用XMLHttpRequest对象构建Ajax应用

利用 XMLHttpRequest对象，每次构建Ajax应用遵循步骤

  1. 创建XHR对象

  2.创建Ajax请求

 3.发送Ajax请求

 4.处理服务器响应

3.创建XMLHttpRequest对象

   XMLHttpRequest对象的创建方式和不同的浏览器相关

  var xmlhttp;

 try{

      xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');

}catch(e){

   try{

     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

   }catch(e){

      try{

           xmlhttp = new XMLHttpRequest()

      }catch(){}

   }

}

这样就用脚本实现了跨浏览器的兼容性

4.使用open方法创建一个请求

Open(method, url , asynchronous,user,password)

参数的含义：

  method：指定请求的类型，一般为get和post

  url：指定请求的地址，可以使用绝对路径或相对地址，可以附带传参

  asynchronous：可选参数，标识请求是同步还是异步，异步请求为true，同步请求为false，默认请求为true

  user：可选参数，指定请求的用户名，没有则省略

  password：可选参数指定请求的密码，没有则省略

5.使用send的方法发送一个请求

   send(body)   该方法仅有一个body参数，指要想向服务器发送的数据，其格式为查询字符串格式、

  如果用post请求必须在send的之前设置HTTP头信息

 xmlhttp.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）

 使用onreadystatechange实现捕获请求的状态变化

 在发送请求后往往不知道请求的什么时候完成，利用事件机制捕获请求的状态

  在调用open 与send的方法都会触发onreadystatechange事件

  使用readyState属性判断请求的状态

   0：表示对象已经建立，但还没有初始化

   1:当调用open方法后，redyState=1，表示XMLHttpRequest对象已经被初始化 

   2：当调用send方法后，XHR在向服务器发送请求的这段时间内readyState=2

   3：当调用send方法，服务器成功接收到所有请求后，readyState=3

   4：表示已经成功接收到来自服务器的相应数据

 使用status属性判断HTTP相应代码

200:请求成功

202：请求被接受，但处理未完成

400：错误请求

404：请求资源为找到

500：服务器内部错误

<script type="text/javascript">

function checkname(){

//ajax校验用户名

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if(xhr.readyState==4){

document.getElementById('result').innerHTML = xhr.responseText;

}

}

//获得输入的用户名，并传递个服务器端

var username = document.getElementById('username').value;

//对ming变量的特殊符号信息进行编码

username = encodeURIComponent(username);

xhr.open('get','./04.php?nm='+ming+'&age=23', true);

//xhr.open第三个参数默认异步请求为true, 改成同步请求为false;

xhr.send(null);

}

</script>