ajax（04）

最新推荐文章于 2025-07-20 21:55:40 发布

原创最新推荐文章于 2025-07-20 21:55:40 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了AJAX POST请求的实现方式，包括XMLHttpRequest的使用、数据格式设定及发送，同时介绍了JSON数据格式及其与JavaScript对象的关系，解析了JSON语法特点及如何将JSON字符串转换为JS对象。

1.ajaxpost请求

if(window.XMLHttpRequest){
		var xhr = new XMLHttpRequest()
	}else{
		var xhr = new ActiveXObject('Microsoft.XMLHttp')
	}
	//2.绑定监听
	xhr.onreadystatechange=function (){
		if(this.readyState==4&&this.status==200){
			var result = this.responseText;
			alert(result);
		}
	};
	//3.打开链接创建请求
	不需要再url后面拼接参数
	var url = '/demo/postlogin';
	xhr.open('post',url,true);
	//4.发送方请求
	*****************************************************
	//由于默认请求的方式是text/plain只能传递普通字符
	//无法传递特殊字符(&)
	//需要设置
	xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	注意：setRequestHeader 必须写在xhr和send之间
	请求主体  格式 ？之后的格式一致
	var formdata="ename="+txt1.value+"&upwd="+ma.value;
	console.log(formdata);
	xhr.send(formdata);

2.json数据格式
1.js对象数据格式

var stu ={
	name:'tom',
	age:18,
	height:175
}

2.json数据的格式

什么是json
JavaScript object Notation
以js对象的数据格式显示出来的字符串
服务器查询数据库得到result是js对象的数组
响应给前台ajax后，被自动转换为json字符串

json语法
1.json中用一对{}表示一个对象
2.json中的属性名称，必须使用""引起来（不能使用单引号）
如果属性的值也是字符串，也必须用双引号引起来
3.表现出来的是一个字符串，所以最外面加引号（使用单引号）
普通的字符串

var tom="汤姆";
var tom='{"name":"tom","age":18}';
普通数组
var arr =["tom","limi"];
json
var jsonarr='[
	
]'

将json字符串转换成js对象/数组
使用JSON.parse()将json字符串解析为js对象/数组
3XML
XML:eXtensible markup language （可扩展的标记语言）
XML的标签没有被定义过，需要自行定义（主要做数据传递）
语法

最顶部出现 
<?xml version='1.0' encoding='utf-8' ?>
没有单标记 只有双标记 
严格区分大小写
可以嵌套
每个标签允许自定义属性 格式 与html一致 属性值必须用""括起来
每个xml只有一个根元素

3.ajax访问xml数据
var result = xhr.responseXML 获取xml内容
result相当于根目录（studentlist）
result.getElementsByTagName() 返回的是类数组可以使用for循环操作
只能使用for循环操作，但是数组的所有api都不能用
4.整合代码
把写好的删除功能的代码放到显示用户列表代码中去，由于deleteUser()传递给服务器的参数是来自input中的值，在用户列表中没有信息框所以xhr.open()中的url需要改成‘/myPro/deleteUser’+uid 这个uid需要通过实参传进去所以在命名函数的deleteUser()这里传入uid 变成deleteUser(uid)。然后在load这个命名函数中找到删除代码的a标签改成如下代码<a href="javascript:deleteUser('+arr[i].uid+');">删除</a>将点击时的uid作为实参
然后在服务返回浏览器显示结果的时候设置一个判断当删除成功返回1时让她弹框然后重新加载load()事件即可

获取url中uid数据代码

var  urlParams = new URLSearchParams(location.search);
var uid = urlParams.get('uid');