通过XMLHttpRequest和jQuery两种方式实现ajax
2024-09-15 02:29:18
一、XMLHttpRequest实现获取数据
不使用jQuery实现页面不刷新获取内容的方式,我们这里采用XMLHttpRequest原生代码实现;js代码如下:
//1.获取a节点,并为其添加Oncilck响应函数
document.getElementsByTagName("a")[0].onclick = function(){
//3、创建一个XMLHttpRequest();
var request = new XMLHttpRequest(); //4、准备发送请求的数据url
var url = this.href;
var method = "GET"; //5、调用XMLHttpRequest对象的open方法
request.open(method,url); //6、调用XMLHttpRequest对象的send方法
request.send(null); //7、为XMLHttpRequest对象添加onreadystatechange 响应函数
request.onreadystatechange = function(){ //8、判断响应是否完成:XMLHttpRequest 对象的readystate的属性值为4的时候
if(request.readyState == 4){
//9、在判断响应是否可用:XMLHttpRequest 对象status 属性值为200
if(request.status == 200){
//10、响应结果
alert(request.responseText);
}
}
}
//2、取消a节点的额默认行为
return false;
}
插入HTML代码:
<a href = "hello.txt">点击获取文本内容</a>
二、jQuery实现ajax获取信息
这个例子是动态的从后台获取数据来改变下拉按钮的内容;
js代码如下:
function bindCarteam0(){
//通过URL请求数据
var URL = <select:link page="/xiaoshouwl.do?method=getCarteamList"/>;
$.ajax({
url:URL,
type:'GET',
dataType: "json",
success:function(html){
var str="<option value='-1'>全部</option>";
for(var i=0;i<html.length;i++){
str+="<option value='"+html[i].id+"'>"+html[i].name+"</option>";
}
$("#carteam_code").empty().html(str);
}
});
}
HTML代码如下:
<select:select property="carteam_code" styleId="carteam_code" style="width:150px">
<select:option value="-1">全部</select:option>
</select:select>
其中type类型有get和post两种;
post 可以传输的数据量比较大,get有字节限制;
最新文章
- Linux 进程间通讯详解六
- VS2013 统计代码量(使用正则表达式)
- 【BZOJ-1060】时态同步 树形DP (DFS爆搜)
- C#对象复制 ICloneable
- [leetcode]Second Highest Salary
- 详解HTML5中rel属性的prefetch预加载功能使用
- android-HttpClient上传信息(包括图片)到服务端
- Guest与virtio netdev交互模式
- xhEditor struts2实现图片上传
- 08 ListView 优化的例子
- Activiti6事件及监听器配置(学习笔记)
- retry示例
- CF Round #510 (Div. 2)
- 20155223 Exp3 免杀原理与实践 实验报告
- SQL Server删除log文件
- python网络编程-paramiko
- 导出php5.4支持的数组格式,即以[]为标识符而不是以array()标识
- WebKit 源码分析 -- loader
- 前端组件化-Web Components【转】
- 【20181019T3】比特战争【最小生成树思想】