首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ajax系列——XMLHttpRequest实现Ajax异步请求

Ajax系列——XMLHttpRequest实现Ajax异步请求

作者头像
陈树义
发布2018-04-13 16:22:49
3K0
发布2018-04-13 16:22:49
举报
文章被收录于专栏:陈树义陈树义

1、用原生的JS代码实现AJAX

页面关键部分的JS如下:

//创建XMLHttpRequest对象
function createXMLHttpRequest()
{
	if(window.XMLHttpRequest)
	{ 
		// DOM 2浏览器
		XMLHttpReq = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		// IE浏览器
		var aVersions = [ "MSXML2.XMLHttp.5.0",  "MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","Microsoft.XMLHttp"];  
         for (var i = 0; i < aVersions.length; i ) {  
	    try {  
		  var oXmlHttp = new ActiveXObject(aVersions[i]);  
  		  return oXmlHttp;  
	    } catch (oError) {  
	      //Do nothing  
	    }  
           }
        throw new Error("不能创建XMLHttp对象!");  
    }  
  }
}
// 发送请求函数
function sendRequest()
{
	// 1.创建XMLHttpRequest对象
	createXMLHttpRequest();
	// 2.连接服务器
	XMLHttpReq.open("POST", url, true);
	// 3.设置请求头
	XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// 4.绑定响应函数
	XMLHttpReq.onreadystatechange = processResponse;	
	// 5.发送请求
	XMLHttpReq.send("chatMsg=" + chatMsg);   //以:请求参数名=请求参数值 的形式发送请求参数。
}

//请求改变状态的时候调用此函数 
function processResponse() 
{ 
// 当XMLHttpRequest读取服务器响应完成 
if (XMLHttpReq.readyState == 4) { 
// 服务器响应正确(当服务器响应正确时,返回值为200的状态码) 
  if (XMLHttpReq.status == 200) { 
      // 使用chatArea多行文本域显示服务器响应的文本 
      document.getElementById("chatArea").value = XMLHttpReq.responseText; 
  } else { 
      // 提示页面不正常 window.alert("您所请求的页面有异常。"); 
    } 
  } 
}

2、使用下面的JS代码可以实现Enter快捷键的功能

其JS代码如下:

function enterHandler(event)
{
	// 获取用户单击键盘的“键值”
	var keyCode = event.keyCode ? event.keyCode 
		: event.which ? event.which : event.charCode;
	// 如果是回车键
	if (keyCode == 13)
	{
		sendRequest();
	}

我们只需在对应的文本输入框<input type="text">中添加onkeypress事件监听函数就可以,如:

<input id="chatMsg" name="chatMsg" type="text"    size="90" onkeypress="enterHandler(event);"/>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014-08-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档