码迷,mamicode.com
首页 > Web开发 > 详细

ajax2.0

时间:2017-11-18 22:04:23      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:ntb   val   index   php   function   require   head   返回   res   

一、formData向后台传数据<br>
1.formData有set、get、append等方法<br>
1)set():设置数据<br>
var formData=new FormData();<br>
formData.set(‘a‘,2);<br>

如果有两个set()方法,且key相同,比如:
formData.set(‘a‘,2);
formData.set(‘a‘,3);
则返回的是3

2)append():添加数据
var formData=new FormData();
formData.set(‘a‘,2);

如果有两个set()方法,且key相同,比如:
formData.set(‘a‘,2);
formData.append(‘a‘,3);
则返回的是[2,3]
3)get():得到数据
比如通过ajax向后台传数据:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var oBtn1=document.getElementById(‘btn1‘);

oBtn1.onclick=function(){
var xhr=new XMLHttpRequest();
var formData=new FormData();
formData.set(‘a‘,12);
xhr.open(‘post‘,‘1.php‘,true);
xhr.send(formData);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText);
}else{
alert(‘失败了‘)
}
}
}
}
}
</script>
</head>
<body>
<input type="button" name="" value="ajax请求" id="btn1">
</body>
</html>

```
```php
<?php
echo $_POST[‘a‘]+$_POST[‘b‘];
?>
```

二、formData文件上传
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var oBtn=document.getElementById(‘btn1‘);
var oF1=document.getElementById(‘f1‘);

oBtn.onclick=function(){
var formData=new FormData();
formData.set(‘f1‘,oF1);

var xhr=new XMLHttpRequest();
xhr.upload.onload=function(){
console.log(‘上传成功‘)
}
xhr.upload.onprogress=function(ev){
console.log(ev.loaded+‘/‘+ev.total);
}

xhr.open(‘post‘,‘2.php‘,true);
xhr.send(formData);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(xhr.status)
}
}
}
}
</script>
</head>
<body>

 

<input type="file" id="f1">
<input type="button" name="" value="ajax请求" id="btn1">
</body>
</html>

```
0.formData.set(‘名字‘, file类型的input)
1.xhr.upload.onload:上传完成
2.xhr.upload.onprogress:进度变化

三、CORS跨域<br>
1.如果是ajax1.0,添加res.setHeader(‘Access-Control-Allow-Origin‘,‘*‘);即可
```JavasSript
const http=require(‘http‘);

let httpServer=http.createServer((req,res)=>{
res.setHeader(‘Access-Control-Allow-Origin‘,‘*‘);
res.write(‘aaaa‘);
res.end();
});

httpServer.listen(8080);

```

2.如果是ajax2.0,需要加上allowHosts.indexOf(req.headers[‘origin‘])!=-1的判断
```JavasSript
const http=require(‘http‘);
let allowHosts=[‘taobao.com‘,‘baidu.com‘];
let httpServer=http.createServer((req,res)=>{
if(allowHosts.indexOf(req.headers[‘origin‘])!=-1){
res.setHeader(‘Access-Control-Allow-Origin‘,‘*‘);
}
res.write(‘aaaa‘);
res.end();
});

httpServer.listen(8080);

```

ajax2.0

标签:ntb   val   index   php   function   require   head   返回   res   

原文地址:http://www.cnblogs.com/chaofei/p/7857938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!