请求XML
books.xml
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>
用responseXML得到数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
</style>
</head>
<body>
<button id="btn">获取XML===>title列表</button>
<div id="box"></div>
<script type="text/javascript">
btn.onclick = function (e) {
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveObject('Microsoft.XMLHTTP');
};
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
if(xhr.status === 200){
console.log(xhr.responseXML);
var data = xhr.responseXML.querySelectorAll('title');
console.log(data[0].innerHTML);
for (var i = 0; i < data.length; i++) {
box.innerHTML += data[i].innerHTML+"<br>";
}
}
}
}
xhr.open('get','books.xml',true);
/*
如果是请求js文件, js内数据必须是双引号;
*/
xhr.send();
}
</script>
</body>
</html>
XHR2文件上传
在标准浏览器下,XMLHttpRequest已经升级了,可以支持很多的一些特性
a)可以跨域,在同一服务器下访问不同的域,跟正常的AJax请求过程一样,但需要后端配合
b)权限问题,后端请求头要允许你访问的域
⑥ header(‘Access-Control-Allow-Origin:http://www.域名.com’)
3. XMLHttpRequest增加了很多功能
c) 规范不推荐使用 onreadystatechange 事件监听状态值,它推荐使用onload
4. IE8+浏览器如果想实现跨域请求,则需要使用另外一个对象实现
d) 创建对象 var xhr = new XDomainRequest( ) 过程跟之前一样
[ https://msdn.microsoft.com/library/cc288060(v=vs.85).aspx ]
[ https://xhr.spec.whatwg.org/ ]
上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
</style>
</head>
<body>
<input type="file" multiple id="input">
<button id="btn">获取</button>
<script type="text/javascript">
btn.onclick = function (e) {
console.log(input.files[0]);
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveObject('Microsoft.XMLHTTP');
};
xhr.onload = function (e) {
console.log("上传成功");
// 上传成功参数
console.log(JSON.parse(this.response));
}
// 上传数据
var upload = xhr.upload;
upload.onprogress = function (e) {
console.log('当前进度'+e.loaded+"总进度"+e.total);
}
xhr.open('post','postFile.php',true);
// 上传的文件
var oFormData = new FormData();
oFormData.append('file',input.files[0]);
// 发送给服务器
xhr.send(oFormData);
// 发送结束
xhr.onloadend = function(pe) {
console.log("end");
}
}
</script>
</body>
</html>
proFile.php
<?php
header('Content-type:text/html; charset="utf-8"');
$upload_position = 'uploads/';
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
exit_status(array('code'=>1,'msg'=>'错误提交方式'));
}
if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){
$pic = $_FILES['file'];
if(move_uploaded_file($pic['tmp_name'], $upload_position.$pic['name'])){
exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_position.$pic['name']));
}
}
// echo $_FILES['file']['error'];
exit_status(array("code"=>2,"msg"=>"出现了一些错误"));
function exit_status($str){
echo json_encode($str);
exit;
}
?>