原生ajax

一直以来,每次需要使用ajax就又去学习一下,但是每次都是这次学会,下次使用的时候又忘了,所以我这些想要做一个总结,以下的内容都是来自W3C中的内容

这是一个完整的ajax

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//如果POST需要发送数据,就把这一行加上,否则其他情况不需要
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>
第一步:
创建XMLHTTPRequest对象(老版的IE5和IE6使用ActiveX对象)
var xmlhttp;
if(window.XMLHttpRequest)
	{
		xmlhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
第二步:
向服务器发送请求
//true代表异步,get请求中请求的参数直接放到URL中,如:(URL = "ssm-student/register?name="+name+"&password="+password)
xmlhttp.open("GET",url,true);
//如果是POST请求,并且POST请求需要发送数据,就把数据放到send()方法中,如:(xml.send("name="+name+"&password="+password))
//并且,需要使用setRequestHeader()来添加HTTP头
//如:xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xml.send();

GET请求和POST请求的区别:
与POST相比,GET更简单也更快,并且大部分情况下都能使用,但是,在以下情况中,使用POST:

  1. 无法使用缓存文件(更新服务器上的文件或数据库)
  2. 向服务器发送大量数据(POST没有数据量限制)
  3. 发送包含未知字符的用户输入时,POST比GET更稳定也更可靠

缓存问题:在使用jquery的Ajax或是jsp/servlet时,会出现一种情况就是,第一次访问页面发送请求,获取的数据是从数据库中获取的,但是再次点击按钮,发送请求时就不去数据库搜索数据了,而是读取缓存中的数据,这样就会造成数据脏读,所以要清理缓存。
cache : false/true ,表示不清理/清理缓存,使之每次都起数据库中取得最新数据。
为了避免这种请求,可以在URL中添加一个唯一的ID

xmlhttp.open("GET","ssm-student/register?t="+Math.random(),true);
xmlhttp.send();
第三步:
响应数据
属性描述
responseText获得字符串形式的响应数据
responseXML获得XML形式的响应数据

使用:

//responseText文本响应
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

//responseXML xml对响应
var xmlDoc = xmlhttp.responseXML;
第四步:
onreadystatechange事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务,每当readyStatus改变时,就会触发onreadystatechange事件,readyStatus属性存有XMLHTTPRequest的状态信息,
属性描述
onreadystatechange存储函数,每当readyState属性改变时,就会调用该函数
readyState存有XMLhttpRequest的状态,从0到4发生变化: 0(请求未初始化),1(请求服务器已建立),2(请求已接收),3(请求处理中),4(请求已完成,且响应已就绪)
status200:(OK), 400:(未找到页面)
资源下载链接为: https://pan.quark.cn/s/3d8e22c21839 随着 Web UI 框架(如 EasyUI、JqueryUI、Ext、DWZ 等)的不断发展与成熟,系统界面的统一化设计逐渐成为可能,同时代码生成器也能够生成符合统一规范的界面。在这种背景下,“代码生成 + 手工合并”的半智能开发模式正逐渐成为新的开发趋势。通过代码生成器,单表数据模型以及一对多数据模型的增删改查功能可以被直接生成并投入使用,这能够有效节省大约 80% 的开发工作量,从而显著提升开发效率。 JEECG(J2EE Code Generation)是一款基于代码生成器的智能开发平台。它引领了一种全新的开发模式,即从在线编码(Online Coding)到代码生成器生成代码,再到手工合并(Merge)的智能开发流程。该平台能够帮助开发者解决 Java 项目中大约 90% 的重复性工作,让开发者可以将更多的精力集中在业务逻辑的实现上。它不仅能够快速提高开发效率,帮助公司节省大量的人力成本,同时也保持了开发的灵活性。 JEECG 的核心宗旨是:对于简单的功能,可以通过在线编码配置来实现;对于复杂的功能,则利用代码生成器生成代码后,再进行手工合并;对于复杂的流程业务,采用表单自定义的方式进行处理,而业务流程则通过工作流来实现,并且可以扩展出任务接口,供开发者编写具体的业务逻辑。通过这种方式,JEECG 实现了流程任务节点和任务接口的灵活配置,既保证了开发的高效性,又兼顾了项目的灵活性和可扩展性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值