Ajax系列——XMLHttpRequest实现Ajax异步请求
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);"/>
![扫描关注微信公众号](https://images.cnblogs.com/cnblogs_com/chanshuyi/1943043/o_220725133529_%E5%BE%AE%E4%BF%A1%E6%90%9C%E4%B8%80%E6%90%9C-%E6%A0%91%E5%93%A5%E8%81%8A%E7%BC%96%E7%A8%8B.png)