AJAX原生JavaScript写法

最新推荐文章于 2021-08-05 12:33:55 发布

原创最新推荐文章于 2021-08-05 12:33:55 发布 · 843 阅读

3 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Ajax技术的实现原理及应用案例，包括GET和POST请求的处理方式，并展示了如何在不刷新页面的情况下通过JavaScript局部更新页面内容。

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

Ajax(Asynchronous JavaScript And Xml) 页面的无刷新技术（异步）

不刷新页面的情况下局部的更新示例：（1）自动补全（2）地图

get方式

<script type="text/javascript">
var xmlHttpRequest = null;

function ajaxSubmit() {
	//创建XMLHttpRequest对象，为考虑兼容性问题，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
		if (window.XMLHttpRequest)
		{
			xmlHttpRequest = new XMLHttpRequest();
		}
		else 
		{
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//设定请求的类型，服务器URL，以及是否异步处理
		xmlHttpRequest.open("POST","ajaxServlet",true);
		xmlHttpRequest.onreadystatechange=function()
		{
		    //4:请求已完成，且响应已就绪    
		    if(xmlHttpRequest.readyState==4)
		    {
		        //200:成功
		        if(xmlHttpRequest.status==200)
		        {
		            //处理结果
		            alert(xmlHttpRequest.responseText);
		        }else
		        {
		        alert("AJAX服务器返回错误！");
		        }
		    }
		}
		//将请求发送到服务器
		xmlHttpRequest.send();
 }
</script>

Post方式（检验用户名是否存在，jsp部分省略）

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据

<script type="text/javascript">
   var xmlHttpRequest = null;

   function ajaxSubmit() {
	if (window.XMLHttpRequest)  
	{
		xmlHttpRequest = new XMLHttpRequest();
	} 
	else
	{ //兼容Ie5 6
		xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (null != xmlHttpRequest)
	{
	    var username=document.getElementById("username").value;
		xmlHttpRequest.open("POST", "ajaxServlet", true);//ready
		//回调函数
		xmlHttpRequest.onreadystatechange = function() 
		{
		     //alert(xmlHttpRequest.readyState);
			if (xmlHttpRequest.readyState == 4) 
			{
				if (xmlHttpRequest.status == 200)
				{
					var responseText = xmlHttpRequest.responseText;
                    if(responseText=="1")
                    {
                      document.getElementById("usernameForValidate").innerHTML='此用户已经存在';
                      document.getElementById("submit").disabled=true;
                    }
                    else
                    {
                       document.getElementById("usernameForValidate").innerHTML='此用户名可用';
                       document.getElementById("submit").disabled=false;
                    }            		
			     }

		     }
         }
          xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		  xmlHttpRequest.send("username="+username);//发送请求
	  }
    }
 }
</script>