AJAX的学习记录

 

AJAX 的学习记录

一。定义：

     XMLHTTP是一套可以在javascript、vbscript、Jscript等脚本语言通过http协议发送或xml及其他数据的API

    它最大的优点就是可以更新网页的部分内容

二。AJAX用到的技术

     javaScript: 实现客户端的数据发送和界面更新，是ajax 实现的编程语言；

XMLHttpRequest ： 浏览器内置的用以进行异步数据发送和接收的对象，是AJAX 核心象；

      Css+div: 对用户而言，AJAX 的价值是用户界面更加友好--- 这当然还是依靠css+div 实现；

  DOM 模型： AJAX 常见的技巧就是使用js 响应dom 组件事件或更新其；

       Xml: XML 仅是一种传输数据的格式，在ajax 应用中常以xml 格式在c/s 间交换数据；

       Html: 这个不用说了，浏览器上展示数据信息的语言。

三。AJAX编程的三大步

    1.取到XMLHTTP对象

 

function getRequestObject(){
	if(window.XMLHttpRequest){
		request = new XMLHttpRequest();
	}else if(window.ActiveXObject){
      try{
    	  request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch(e){
          try{//IE浏览器
        	  request=new ActiveXObject("Microsoft.XMLHTTP")
          }catch(e){

          }
      }//end try
	}else{
		 window.alert("您的浏览器不支持XMLHttpRequest,将无法使用AJAX.");
	}
}

      （2）设置回调函数，把服务器发回来的信息显示到制定组件中

 

//将服务器返回的信息根更新的div中
function processResult(){
	
	//确保服务器应答ok，请求对象已处理完成
	if((request.readyState==4)&&(request.status==200)){
		alert("服务器返回的是："+request.responseText);
		//显示到指定组件中
		document.getElementById("errorMSG").innerHTML=request.responseText;
	}
	
}

   （3）用post发出请求

 

//AJAX发送post请求
function sendRequest(){
     //获得XMLHttpRequest
    getRequestObject();
    //绑定回调方法
    request.onreadystatechange=processResult; 
   //发送请求
    request.open("post","LoginAction",true);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     var username=document.getElementById("username").value;
    request.send("username='"+username+"'");
    
}

       以get发出请求

 

function sendRequest(){
     //获得XMLHttpRequest
    getRequestObject();
    //绑定回调方法
    request.onreadystatechange=processResult; 
   //发送请求
   
     var username=document.getElementById("username").value;
    request.open("get","LoginAction?username="+username,true);
    request.send(null);
}

    这个会存在字符集编码问题，会输入中文会出现乱码。

 

四.出现问题以及解决发方法

    1.发送请求出现乱码问题

       (1)以get方法发送请求的话，在服务器端把取到的数据给转码，比如：

           

String name=request.getParameter("fileName");
		name=new String(name.getBytes("ISO-8859-1"));

 

       (2)以post发送请求时，只要写上

 

request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      这句话，就不会出现乱码问题，而且它默认的是utf-8的编码格式，所以在服务器端不要给request设定编码了

      值得注意的是，要是以post方法提出请求，要是不写上上面那句话，传到服务器上的值是null

     并且要注意顺序问题，先写

 request.open("post","LoginAction",true);

    在写

request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    不然还是null值

 

   2.js程序不会报错，所以很那检错，但是，程序中任何地方出错，程序就会中断在那，不会顺利执行到自己想要的结        果， 所以开始写时要注意写测试语句

   3.为什么要把open的第三个参数设为true？

     该参数规定请求是否异步处理。

     True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

      onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。

      通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代  码无关紧要，那么可以使用这个参数。

    4.调用回调方法时，方法名不能加括号。如：

 

 request.onreadystatechange=processResult; 

   processResult不能再写括号，否则AJAX不能正确运行

    5.当代码在执行到

 

var descs=request.responseXML.getElementsByTagName("desc");

   这句话就执行不下去时，就是服务器发送的xml文件写错了，或者把

 

response.setContentType("text/xml; charset=gbk");

   中的text/xml写成其他格式。

 

五。在上传的文件里有五个经典的AJAX示例