您的位置：首页 > 理论基础 > 计算机网络

关于原生JavaScript的http全部请求 post get json xml file 全了 拿去救急

2016-03-25 14:57 555 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest 请求</title>
</head>
<body>
<script type="text/javascript">
//使用http请求的步骤
//第一步：创建XMLHttpRequest对象
var request = function(){
if(window.XMLHttpRequest === undefined){//在ie5和ie6中模拟XMLHttpRequest构造函数
window.XMLHttpRequest = function(){
try{
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch(el){
try{
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e2){
throw new Error("出错了！");
}
}
}
}else{
return new XMLHttpRequest();
}
}
//第二步：调用XMLHttpRequest对象的open()方法指定请求的两个必须部分，即方法和URL
/*
* 第一个参数指定http方法和动作
* 第二个参数指定是URL是请求的主题，当时跨域请求时会报错
* */
request.open("GET", url);

/*
* 第三部：如果有请求头的话，请求进程下个步骤就是设计它
* 例如POST请求需要“Content-Type”头指定请求主题的MIME*/
request.setRequestHeader("Content-Type", "text/Plain");

/*

* 第四步：使用XMLHttpRequest发起http请求的最后一步是指定可选的请求主题并向
* 服务器发送它，使用send()方法*/
request.send(null);

/*注意GET请求绝对没有主体，所以应该传递null或者省略这个参数

* POST请求通常拥有主体，同时它应该匹配使用setRequestHeader()指定Content-Type头
* http求情的顺序：
* 请求方法和URL首先到达，然后是请求头，
* 最后是请求主体*/

//实例：
function postMessage(msg){
var request = new XMLHttpRequest();//新请求

request.open("POST", "./log.php");//用post向服务器发送脚本
request.setRequestHeader("Content-Type", "text/Plain;charset=UTF-8");//纯文本请求体
request.send(msg);
}

/*解析http响应
* 当响应到达时，把它以解析后的XML document对象、解析后的json对象
* 或字符串形式传递给回调函数*/
function get(url, callback){
var request = new XMLHttpRequest();//新请求

request.open("GET", url);
request.onreadystatechange = function(){
if(request.readyState === 4 && request.status === 200){
var type = request.getResponseHeader("Content-Type");//获得响应类型
if(type.indexof("xml") !== -1 && request.responseXML){
callback(request.responseXML);//document对象响应
}else if(type === "application/json"){
callback(JSON.parse(request.responseText));//json响应
}else{
callback(request.responseText);//字符串响应
}
}
}
request.send(null);
}
/*
* 表单编码请求
* 如果html表单的名/值对，使用application/x-www-form-urlencode格式*/
function encodeFormData(data){
if(!data){
return "";//一直返回字符串
}
var pairs = [];

for(var name in data){
if (!data.hasOwnProperty(name)) {//判断一个对象是否有你给出名称的属性或对象
continue;
}
if(typeof data[name] === "function"){
continue;
}

var value = data[name].toString();
name = encodeURIComponent(name.replace("%20", "+"));//编码名称
value = encodeURIComponent(value.replace("%20", "+"));
pairs.push(name + "=" + value);
}
return pairs.join('&');
}

/*
*使用表单编码数据发起一个http post请求*/
function postData(url, data, callback){
var request = new XMLHttpRequest();//新请求
request.open("POST", url);//用post向服务器发送脚本

request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);//调用回调函数
}
};

request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//纯文本请求体
request.send(encodeFormData(data));//发送表单编码的数据
}

/*
*使用表单编码数据发起一个http get请求*/
function postData(url, data, callback){
var request = new XMLHttpRequest();//新请求
request.open("GET", url + "?" + encodeFormData(data));//用post向服务器发送脚本

request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);//调用回调函数
}
};

request.send(null);//发送表单编码的数据
}

/*
*使用json编码的请求*/
function postData(url, data, callback){
var request = new XMLHttpRequest();//新请求
request.open("POST", url);//用post向服务器发送脚本

request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);//调用回调函数
}
};

request.setRequestHeader("Content-Type", "application/json");//纯文本请求体
request.send(JSON.stringify(data));//发送表单编码的数据
}

/*
*使用xml编码的请求*/
function postQuery(url, what, radius, callback){
var request = new XMLHttpRequest();//新请求
request.open("POST", url);//用post向服务器发送脚本

request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);//调用回调函数
}
};

var doc =document.implementation.createDocument("", "query", null);
var query = doc.documentElement;
var find = doc.createElement("find");
query.appendChild(find);
find.setAttribute("zipcode", where);
find.setAttribute("radius", radius);
find.appendChild(doc.createTextNode(what));//并设计<find>的内容

//向服务器发送XML编码数据
//注意将自动设置content-type头
request.send(doc);//发送表单编码的数据
}

/*

* 使用http post请求上传文件
* 查找有data-uploadto属性的全部<input type="file">元素
* 并注册onchang事件处理程序
* 这样任何选择的文件都会自动通过post方法发送到指定的"uploadto" url
* 服务器的响应式忽略的*/

window.onload = function(){
var elts = document.getElementsByName("input");

for(var i=0; i<elts.length; i++){
var input = elts[i];

if(input.type != "fild"){
continue;
}

var url = input.getAttribute("data-uploadto");//获取上传URL

if(!url){
continue;
}

input.addEventListener("change", function(){
var file = this.files[0];

if(!file){
return;
}

var xhr = new XMLHttpRequest();//新请求

xhr.open("POST", url);//用post向服务器发送脚本
xhr.send(file);
}, false)
}

}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航