j2ee建立在线聊天室详细教程（第八天ajax使用详情）

张2公子
179 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第十九天，点击查看活动详情

--------20220624

我的锅我的锅，这两天旅游去了，就没更博客，去了龙岩和三明，属于是玩疯了，现在回来补文章啦！努力努力，写到21篇，今天给大家讲解一下我们聊天室的ajax是如何使用的

ajax使用

这边给大家讲的是，我们ajax在我们聊天室当中，是如何具体运行的，其发起异步请求，是如何获取参数，编写回调处理的

代码源码

/**
 *zzl 
 * 20200623
 * 
 */

var xmlHttp;

function createXmlHttpRequest(){
    if (window.XMLHttpRequest) { 	
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) { 
    	try {
                return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        	try {
                    return new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e) {}
        }
    }
}

function ajax(options){
	xmlHttp = createXmlHttpRequest();
	var url = options.url+"?timeStemp="+new Date().getTime();
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4){		
			if(xmlHttp.status==200){	
				options.Success(xmlHttp.responseText);	
			}
		}
	};
	xmlHttp.open("POST",url,true);	
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
	xmlHttp.send(options.data);			
}

代码讲解

开始我们代码的讲解，首先我们需要了解ajax，这个其实之前的文章里面也写到过，我现在没找到，那就再写一次吧

ajax

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
那么再了解之后，我们理清一下这个在我们聊天室中的使用
首先我们需要申请异步操作对象变量，也就是代码中的var xmlHttp语句，之后定义函数function createXmlHttpRequest()

function createXmlHttpRequest()

这个函数的作用是，实例化异步操作对象，因为异步操作，面向对象。之后一个if循环，我们需要判断，页面所使用的浏览器。

为什么需要区分不同浏览器

有些网站要求用IE打开，有些时候要求的其实是IE内核浏览器，浏览器产生兼容性问题的原因是什么？

  1. 不同内核对相同事件的处理方法不同
  2. 不同内核对CSS,JS,HTML的支持不同
  3. IE支持ActiveX控件
    所以这边我们分为IE浏览器和非IE浏览器，其中非IE浏览器里也分为很多种，不同浏览器也会有差别，所以这边设置了一个try catch语句，可以通过判定是否出现异常，来判定我们返回的数据对象

function ajax(options)

这个函数的作用是，发起异步请求方法。首先我们需要通过语句xmlHttp = createXmlHttpRequest()，获取对象，之后是非常重要的一步，也就是从参数中获取服务器url地址，带上时间参数，保证每一次请求的url都不一样。获取url地址之后，我们就需要编写回调处理

回调

回调的思想是:

类A的a()方法调用了类B的b()方法
类B的b方法执行完毕主动调用类A的callback()方法
方法使用时，一共调用两次

其中if(xmlHttp.readyState==4)语句，说明异步请求正常，if(xmlHttp.status==2）语句，说明HTTP请求正常。最后一句，options.Success(xmlHttp.responseText) 表示我们使用参数对象中的方法处理异步响应的数据

最后就是我们打开链接，然后通过xmlHttp.open("POST",url,true)语句 开启异步方式，发POST请求，大家要记得设置请求头类型，让服务器以为是浏览器发起的请求.设置完请求的头类型后，我们就可以发送请求了，通过xmlHttp.send(options.data)语句向服务器传参。

今天就到这里吧，大家晚安呀！

avatar
文章
阅读
粉丝