您的位置：首页 > 其它

ajax的数据传递和ajax传输XML的数据

2020-03-28 20:05 106 查看

一、get方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jQueryLib/jQuery.max.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" defer="">
$(function () {													//get方式
$($('button')[0]).on('click', function () {
var xhr = new XMLHttpRequest();							//创建XMLHttpRequest对象
xhr.open('get', './test02.php?username=李明');			//设置请求头，并get传递数据,异步传输
xhr.send(null);											//发送空请求体，并发送请求
xhr.addEventListener('load', function () {				//回调函数，在得到响应后进行处理
alert('你好,' + xhr.responseText);					//打印
})
});
})
</script>
</head>
<body>
<button>点我GET</button>
<button>点我POST</button>
</body>
</html>

对应的test02.php文件

<?php
echo $_GET['username'];

输出结果：

二、post方法

$($('button')[1]).on('click',function () {												//post方式
var xhr=new XMLHttpRequest();										//创建XMLHttpRequest对象
xhr.open('post','./test03.php');									//设置请求头，并post传递数据,异步传输
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');	//post传递要确定数据的格式
xhr.send('username=李明');											//发送post请求体，并发送请求
xhr.addEventListener('load',function () {							//回调函数，在得到响应后进行处理
alert('你好,'+xhr.responseText);								//打印
})
})

对应的test03.php文件

<?php
echo $_POST['username'];

结果：

同步传输

默认是异步传输，一般都不会使用同步传输

xhr.open('get', './test02.php?username=李明',false);
xhr.open('post','./test03.php',false);

为了更好的兼容性

可以改一下回调函数

xhr.addEventListener('readystatechange',function () {
if (xhr.readyState===4&&xhr.status===200){
alert('POST你好,'+xhr.responseText);
}
})

三、ajax传输XML的数据
上面的get和post可以传输比较简单的数据，因此有两种解决方法，一种是传输一个xml格式的dom树，另一种是json方法，这里介绍前一种方法。
XML文档

<?xml version="1.0" encoding="UTF-8" ?>
<students>
<uname>李玲</uname>
<num>001</num>
<gender>female</gender>

<uname>李明</uname>
<num>002</num>
<gender>male</gender>

<uname>李华</uname>
<num>003</num>
<gender>male</gender>
</students>

PHP

<?php
header('Content-type:text/xml','charset=utf-8');//告诉浏览器传回来的数据格式是XML
$xml=file_get_contents('./lll.xml');			//读取xml文件
echo $xml;										//返回一个xml类型的dom树

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jQueryLib/jQuery.max.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" defer="">
$(function () {
$('button').on('click',function () {
var xhr=new XMLHttpRequest();
xhr.open('post','test03.php');
xhr.setRequestHeader('Content-	type','Capplication/x-www-form-urlencoded');		//告诉服务器传输的数据类型
xhr.send($('input').val());		//发送请求
xhr.addEventListener('readystatechange',function () {
if (xhr.status==200&&xhr.readyState==4){
console.log(xhr.responseXML.querySelector('uname').innerHTML);
//因为xhr.responseXML返回的是一个xml类型的dom树，所以可以采取获取html的dom元素的方法去获取xml里面的数据
}
});
})
});
</script>
</head>
<body>
<input type="text" value="" size="20"/>
<button>点我POST</button>
</body>
</html>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
翻斗幼儿园的胡图图 发布了36 篇原创文章 · 获赞 0 · 访问量 562 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航