开发一个用户注册界面，使用ajax交互技术

　　ajax是什么呢?允许浏览器与服务器通信而无须刷新前页面的技术都被叫做Ajax.

　　AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

　　首先Ajax请求的步骤：

　　(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象;

　　(2)创建一个新的HTTP请求,并指定该HTTP请求的方式、URL及验证信息;

　　(3)设置响应HTTP请求状态变化的函数;

　　(4)发送HTTP请求;

　　(5)获取异步调用返回的数据;

　　(6)使用JavaScript和DOM实现局部刷新。

　　注册页面由web开发，还是html,css,js组成。

　　其中为了实现用户注册我们引入了XMLHttpRequest对象，该对象可以让服务器与网页进行通信，让一个本来静态的网页可以和我们互动。我们需要为他设计对象类型API，其主要负责客户端和服务端数据的传递和接收和请求XML数据(JSON/TEXT)

　　其实我感觉JS最不好写…

　　附上代码：

　　task4.js:

　　//登录页的操作DOM

　　var register = document.getElementById('register');//获得登录页的注册按钮元素

　　var getVertify = document.getElementById('getVertify');//获得获取验证码的按钮元素

　　var userName = document.getElementById('userName');//获取邮箱框框元素

　　var vertify = document.getElementById('vertify');//获取验证码框框元素

　　var userPwd = document.getElementById('userPwd');//获取密码框框元素

　　var login = document.getElementById('login');//获取登录按钮元素

　　//全局变量

　　var vertifyCode , yourEmail ,yourPwd;

　　//获取验证码函数

　　getVertify.>

　　myAjax('GET',"http://120.24.93.68:/api/register/sendCheckCode",{"email":""+userName.value+""},

　　function(xhr){

　　var str = xhr.responseText;

　　var myObj = JSON.parse(str);

　　console.log(myObj);

　　vertifyCode = myObj.data;

　　vertify.value = vertifyCode;

　　console.log(vertifyCode);

　　console.log(myObj.code,myObj.message);

　　},function(xhr){

　　alert('请求失败!');

　　}) ;

　　//点击注册进行跳转到注册页面

　　register.>

　　if(vertify.value != vertifyCode)

　　{

　　alert('当前验证码出错或超时!');

　　}

　　else

　　{

　　window.location.href = "register.html";

　　}

　　}

　　}

　　//登录函数

　　login.>

　　if(userPwd.value.length == 0 || userName.value.length == 0)

　　{

　　alert(‘密码和邮箱不能为空!’);

　　}

　　else

　　{

　　myAjax(‘POST’,‘http://120.24.93.8/api/login’,

　　{

　　“email”:""+userName+"",

　　“password”:""+userPwd+""

　　},

　　function(xhr){

　　var str = xhr.responseText;

　　var myObj = JSON.parse(str);

　　console.log(myObj);

　　if(myObj.code != 200)

　　{

　　alert(‘密码或用户名错误’);

　　}

　　else

　　alert(‘登录成功’);

　　},

　　function(xhr){

　　alert(‘登录失败!’);

　　})

　　}

　　}

　　//对象转字符串

　　function objToStr(obj){

　　obj.time = new Date().getTime();

　　var res = [];

　　for(var key in obj){

　　res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));//encodeURIComponent进行中文转码

　　}

　　return res.join("&") ; 　　 郑州看胎记费用 http://www.zykdtj.com/

　　}

　　//封装Ajax函数

　　function myAjax(type ,url , obj, success, error){

　　//将对象转换成为字符串

　　var str = objToStr(obj);

　　//创建一个异步对象

　　var xmlhttp , timer;

　　if(window.XMLHttpRequest){ //IE7+ , 火狐 , 谷歌 等浏览器

　　xmlhttp = new XMLHttpRequest();

　　}

　　else{ //兼容IE6,IE5

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

　　}

　　//判断请求方式并设置请求

　　if(type === "GET"){

　　//发送GET请求

　　xmlhttp.open("GET", url + "?" + str)

　　xmlhttp.send();

　　}

　　else{

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

　　xmlhttp.setRequestHeader("Content-type","application/json;charset=UTF-8");

　　xmlhttp.send(JSON.stringify(obj));

　　}

　　//监听状态变化

　　xmlhttp.>

　　if(xmlhttp.readyState === 4){

　　if(xmlhttp.status === 200 ){

　　success(xmlhttp);

　　}

　　else{

　　error(xmlhttp);

　　}

　　}