【AJAX】——实战应用，完整Demo

朴灿烈づ我的快乐病毒、 2022-07-12 12:06 191阅读 0赞

# 前提 #

之前小编整理过关于AJAX的一些理论内容，其实在这些理论之后也做一些实战工作，可惜那时候的小编没有整理出来，随着项目结束，直到最近项目的使用，发现小编自己忘记怎么做了！！！惭愧啊，归根结底，理解不深，为了杜绝类似的情况，整理下，便于更加深入的理解，如有不对之处，恳请大家一定要不惜赐教啊！

# 应用过程 #

##    1、创建xmlHttpRequest对象 ##

### 为什么要创建？ ###

XMLHttpRequest用于在后台于服务器交换数据。这意味着可以在不重新加载整个网页的前提下，对网页的部分内容刷新。而且现代浏览器都支持XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject）。

## 2、配置XMLHttpRequest对象，向服务器发送请求 ##

在配置过程中可以设置提交方式，提交地址，以及同异步提交

xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);

默认是是同步提交，异步提交的话，设置为false；

###    GET 还是 POST？ ###

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

I、无法使用缓存文件（更新服务器上的文件或数据库）

II、向服务器发送大量数据（POST 没有数据量限制）

III、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

## 3、XMLHttpRequest服务器响应 ##

### onreadystatechange事件 ###

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当readyState改变时，就会触发onreadystatechange事件。

xhr.onreadystatechange = function(){
    			if(xhr.readyState == 4 ){
    				if(xhr.status == 200 ){
    					document.getElementById("span1").innerHTML = xhr.responseText;
    				}
    			}
    		
    		}

4、发送请求

xhr.send(null);

# 完整Demo #

# 总结 #

千万不要相信记忆力，一方面不熟悉，一方面真的会忘记。其实关于ajax的时候还会存在很多问题，例如乱码，跨域等问题，还是在后续的实战中不断总结！下次在遇到异步的问题，我估计就不会害怕了，还是注重熟练，技能吧！

【AJAX】——实战应用，完整Demo

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ajax应用_AJAX的应用

相关 SpringCloudAlibaba完整demo

相关 Ajax 完整教程(转)

相关 ajax应用入门——demo制作（2）

相关【AJAX】——实战应用，完整Demo

相关 jQuery Ajax 案例 Demo

相关 AJAX.Demo

相关 ETL利器Kettle实战应用解析系列二【应用场景和实战DEMO下载】

相关 ajax---简单使用Demo

相关 Ajax 完整学习笔记