javaspript基础，Ajax实现客户端与服务器端通信

Ajax，能够通过javaspript于服务端通讯

 

1、HTTP请求

        现在，很多浏览器都可以直接从JavaScript中初使化HTTP请求并获取结果,完全不用隐藏框架和其他取巧的小技巧。

        这个令人振奋的新功能的核心是，微软创建的XML HTTP请求的对象。这个对象是与MSXML一起出现的，直到最近它的能力才被完全发掘。XML HTTP请求本质上是添加了额外的用于发送和接收XML代码的功能的HTTP请求。

         与IE中的XML DOM一样，XML HTTP请求对象有多种版本。

} Ajax (Asynchronous JavaScript and XML)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起

} Ajax的关键技术：

使用XHTML(HTML)和CSS构建标准化的展示层使用DOM进行动态显示和交互2使用XML和XSLT进行数据交换和操纵3使用XMLHttpRequest异步获取数据 使用JavaScript将所有元素绑定在一起

写一个ajax程序

第一步：创建一个XMLHTTP对象

function XMLHttpRequest() {

var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",

                             "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",

                             "Microsoft.XMLHTTP"];

//不同浏览器版本下的xml版本

//创建最新版本的、ActiveXObject对象，创建成功就立刻返回

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

            try {var oRequest = new ActiveXObject(arrSignatures[i]);

                return oRequest;

            } catch (oError) {//没有这个对象就会异常

                //ignore

            } }         

第二步：创建好XML HTTP请求对象后，可用Open()方法来指定要发送的请求

oRequest.open(“get”,”example.txt”,false);//创建好ActiveXObject要对他进行配置

该方法有三个参数：

1、 要发送的请求的类型:GET、POST、Header等

//如果是post，send里面会有参数，如果get，send方法不用参数，一般url里面都包括了send（null）

2、请求的URL  

3、异步(true)或同步(false) //一般情况下应该是true

第三步：通过send方法发送请求

oRequest.send(null)

Send方法一定要有一个参数，不过大多数情况下为null.

第四步：如果是异步发送请求,可以通过以下属性查看HTTP状态

1、oRequest.status: 一整型值：200-正常；404-没找到指定页面..//正常返回才会往下进行

2、oRequest.statusText:描述状态信息，

3、responseText：记载由服务器返回的文本

4、responseXML: 如果返回的是XML，则可用其返回由文本构造出的XML DOM对象

服务器端返回的xml对象

如果要发送异步请求，必须使用onreadystatechage事件处理函数，并检查readyState特性是否等于4(与XML DOM一样),response对象在请求完毕前不可用

如：

Var oRequest = createXMLHTTP();

oRequest.open(“get”,”getUserInfo.aspx”,true);

oRequest.onreadystatechange = function()//非常重要的回调函数，这里检查seadyState

{

     if (oRequest.readyState == 4) {

//0代表正在初始化xml的对象1，正在建立连接2，正在向服务器端发送数据，3，服务器端正在处理，返回结果 4服务器端已经处理完毕

 alert(“status = “+oRequest.status+”\n”+oRequest.statusText+”\n”+oRequest.responseText); }}

oRequest.send(null);

如果结果是4，状态是200，说明已经成功返回到服务器端

// JScript 文件

function CreateHttpRequest() {

        var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",

                             "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",

                             "Microsoft.XMLHTTP"];

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

            try { var oRequest = new ActiveXObject(arrSignatures[i]);

                return oRequest; } catch (oError) {

               } }      //ignore    

throw new Error("MSXML is not installed on your system.");        }

 var Http = new Object();

  Http.Get=function(url,fnLoading,fnCallBack)//创建一个get对象

     {var oRequest = CreateHttpRequest();

     if (oRequest){

        oRequest.open("get",url,true);

        oRequest.onreadystatechange = function(){

             if (oRequest.readyState == 4){

if (fnCallBack) fnCallBack(oRequest.responseText);//如果有返回直接返回接收的值

             }else{

if (fnLoading) fnLoading();}} oRequest.send(null);} }//否则执行fnloading方法

function send(){

         var fnLoading =function(){//页面执行方法

            var oDiv = document.getElementById("divLoading");

if (oDiv) {oDiv.innerHTML="<font color='red'>Loading...</font>";}}

         var fnCallBack = function(result) {//返回结果

            var oDiv = document.getElementById("divLoading");

            oDiv.innerHTML = result; }

         Http.Get("Default.aspx",fnLoading,fnCallBack); }

<div id="divLoading"></div> // fnLoading加载时执行函数，fnCallBack成功后执行函数

<input type="button" id="btnSend" value="Send" onclick="send()"/>

} 使用HTTP首部

　　　每个HTTP请求发送时都包含一组带有额外信息的首部.在我们使用浏览器时，这些首部被隐藏了，因为对于终端用户来讲，这些信息是没用的．然而，这些首部信息对开发人员来说可能是很重要的．

１、getAllResponseHeaders()方法

　　　用于返回所有响应的HTTP首部信息

２、getResponseHeader(“参数“)

           用于获取指定的某个首部

３、setRequestHeader(“myheader”,”value”);

           用于设置XML HTTP请求的首部信息

} 一个HTTP请求如下所示：

} Server: Microsoft-IIS/5.1

} Date: Mon, 04 Aug 2008 14:46:05 GMT

} X-Powered-By: ASP.NET

} X-AspNet-Version: 2.0.50727

} Cache-Control: private

} Content-Type: text/xml; charset=utf-8

} Content-Length: 15812

} oRequest.getAllResponseHeaders() //得到上述信息

} oRequest.getResponseHeader(“Content-Type”)

} //text/xml; charset=utf-8

} oRequest.setRequestHeader(“myHeader”,”myvalue”);

} 这里可以假设你设计了一些服务器逻辑来根据这些首部信息提供额外的功能或者对请求的计算

} 进行GET请求

Web上最常见的请求类型就是GET请求.

每次在浏览器中输入URL并打开页面时，就是在向服务器发送一个GET请求：

如： http://www.google.com.cn?search=ajax&name=aaa

可用以下函数处理URL参数

function addURLParam(sURL,sParamName,sParamValue)

{

     sURL+=(sURL.indexOf(“?”) == -1?”?”:”&”); sURL+=encodeURIComponent(sParamName)+”=“+encodeURIComponent(sParamValue);

   return sURL:}

使用：Var sURL = http://www.google.com.cn;

sURL = addURLParam(sURL,”search”,”ajax”);

sURL = addURLParam(sURL,”name”,”aaa”);

var result=new Date().getTime();

sURL = addURLParam(sURL,”catch”,result);

oRequst.open(“get”,sURL,true);

oRequse.send(null);

说明：对于ajax请求，通过情况下为了清除服务器缓取，通常会采取此种做法应使参数不同

} 进行POST请求

与Get请求一样，POST请求的参数也必须进行编码，并用&进行分割，尽管这此参数不会被附加到URL上，发送POST请求时，要将参数传入send()方法：

oRequst.open(“post”,”http://www.myweb.com/login.aspx”,false);

oRequest.send(“username=admin&password=123”);

注意：利用post方法进和ajax请求时：必须将请求“Content-Type”首部设置为”application/x-www-form-urlencoded”,故：

oRequst.open(“post”,”http://www.myweb.com/login.aspx”,false);

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

oRequest.send (“username=admin&password=123”);

onclientclick 服务端触发按钮事件

 Http是封装好的方法url是传送的地址，fnloading，是执行过程的方法，fncallback是传送网站返回值

  Http.Get(url,fnLoading,fnCallBack);