Ajax开发模式回顾

Ajax开发模式

  Ajax 即“Asynchronous Javascript And XML”，意思是异步的javaScript与XML，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端异步请求操作，从而可以在不需刷新页面的情况下与服务器进行通信，使得应用程序有更好的用户体验。

  首先回顾下HTTP请求过程7个步骤：

1、建立TCP连接——>2、浏览器向服务器发送请求命令——>3、浏览器向服务器发送请求头信息——>4、服务器应答、

——>5、服务器发送应答头信息、——>6、服务器发送数据——>7、服务器关闭TCP连接

HTTP请求的四个组成部分：

请求的方法或动作（get/post）、请求的URL、请求头，请求体

Get请求：幂等的，安全的，一般用于查询等请求
Post请求：一般用于表单数据提交

HTTP响应的三个组成部分：文字和数字组成的状态码、响应头、响应体

用XMLHttpRequest对象和web 服务器进行数据的异步交换；

1、XMLHttpRequest发送请求：
open(method,url,async)方法，方式get或post,  请求地址，同步false还是异步true(默认)
send();方法
2、XMLHttpRequest取得响应：
responseText :获得字符串形式的响应数据
responseXML:获得xml形式的响应数据（现在被淘汰，一般用json）
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader();获取所有响应报头
getResponseHeader():查询响应中的某个字段

readyState属性:监听该属性查看请求是否成功响应

简单的例子

var xmlhttp;

 functionverify() {//这个方法使用XMLHttpRequest对象来进行Ajax异步交互数据

     //1.使用dom的方式获取文本框的内容

     varuserName = document.getElementById("username").value;

     //2.创建XMLHTTPRequest对象

     if(window.XMLHttpRequest) {

          xmlhttp = new XMLHttpRequest();

     } elseif(window.ActiveXObject) {

          //针对ie6以下版本

          var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

          //两个可以用来创建XMLHTTPRequest对象的控件，进行尝试创建

          for (var i = 0; i < activexName.length; i++) {

              try {

                  xmlhttp = newActiveXObject(activexName[i]);

                  break;

              } catch (e) {

              }

          }

     }

 

     //最后确认xmlhttprequest对象创建成功

     if(!xmlhttp) {

          alert("请更换更新版本的浏览器");

          return;

     } else{

          //2.注册回调函数,只需要函数名不需要加括号

          xmlhttp.onreadystatechange =callback;

          //3.设置连接信息

          xmlhttp.open("GET", "check.jsp?name=" + userName, true);

          //4.发送数据，开始和服务器端进行交互

          xmlhttp.send(null);

     }

 }

 

 //回调函数

 functioncallback() {

     //判断对象交互完成

     if(xmlhttp.readyState == 4) {

          //判断http交互是否成功

          if (xmlhttp.status == 200) {

              //获取服务器的数据

              //获取纯文本的数据

              var responseText = xmlhttp.responseText;

              document.getElementById("username_tip").innerHTML= responseText;

          }

     }

 }