AJAX的学习记录

最新推荐文章于 2024-11-04 16:24:50 发布

原创最新推荐文章于 2024-11-04 16:24:50 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #应用服务器 #浏览器 #编程 #XML

本文介绍了AJAX的基础概念及其核心技术，包括XMLHttpRequest对象的获取、回调函数的设置及POST与GET请求的发送方式，并讨论了解决AJAX编程中常见问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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示例