简谈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>









阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页