整理ajax各种请求方式

一、XMLHttpRequest对象

     Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

1.get请求

function GetXHR(){            var xhr = null;            if(XMLHttpRequest){                xhr = new XMLHttpRequest();            }else{                xhr = new ActiveXObject("Microsoft.XMLHTTP");            }            return xhr;        }        function XmlGetRequest(){            var xhr = GetXHR();            // 定义回调函数            xhr.onreadystatechange = function(){                if(xhr.readyState == 4){                    // 已经接收到全部响应数据，执行以下操作                    var data = xhr.responseText;                    console.log(data);                }            };            // 指定连接方式和地址----文件方式            xhr.open('get', "/test/", true);            // 发送请求            xhr.send();        }

2.post请求

 function GetXHR(){            var xhr = null;            if(XMLHttpRequest){                xhr = new XMLHttpRequest();            }else{                xhr = new ActiveXObject("Microsoft.XMLHTTP");            }            return xhr;        }        function XmlPostRequest(){            var xhr = GetXHR();            // 定义回调函数            xhr.onreadystatechange = function(){                if(xhr.readyState == 4){                    // 已经接收到全部响应数据，执行以下操作                    var data = xhr.responseText;                    console.log(data);                }            };            // 指定连接方式和地址----文件方式            xhr.open('POST', "/test/", true);            // 设置请求头            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');            // 发送请求            xhr.send('n1=1;n2=2;');        }

3.jQuery中的ajax

1. jQuery.get(...)       所有参数：              url: 待载入页面的URL地址             data: 待发送 Key/value 参数。          success: 载入成功时回调函数。         dataType: 返回内容格式，xml, json,  script, text, html   2.jQuery.post(...)       所有参数：              url: 待载入页面的URL地址             data: 待发送 Key/value 参数          success: 载入成功时回调函数         dataType: 返回内容格式，xml, json,  script, text, html   3.jQuery.getJSON(...)       所有参数：              url: 待载入页面的URL地址             data: 待发送 Key/value 参数。          success: 载入成功时回调函数。   4.jQuery.getScript(...)       所有参数：              url: 待载入页面的URL地址             data: 待发送 Key/value 参数。          success: 载入成功时回调函数。  5.jQuery.ajax(...)       部分参数：              url：请求地址             type：请求方式，GET、POST（1.9.0之后用method）          headers：请求头             data：要发送的数据      contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")            async：是否异步          timeout：设置请求超时时间（毫秒）       beforeSend：发送请求前执行的函数(全局)         complete：完成之后执行的回调函数(全局)          success：成功之后执行的回调函数(全局)            error：失败之后执行的回调函数(全局)          accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型         dataType：将服务器端返回的数据转换成指定类型            "xml": 将服务器端返回的内容转换成xml格式           "text": 将服务器端返回的内容转换成普通文本格式           "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。         "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式           "json": 将服务器端返回的内容转换成相应的JavaScript对象          "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

4.vue中的ajax

new Vue({el:'#ul_01',data:{},methods:{    getMsg:function(){         //alert(1); this.$http.get('test.txt').then(function(res){ //成功 alert(res.data);    },function(){ //失败 alert('网络错误，请稍候在试...');    })}    })

5.angular中的ajax

var app = angular.module('test', []);   app.controller('contParent',function($scope,$http){//父控制器$http({method:'get',url:'test.json',params:{name:'zhangsan',id:1}}).then(function success(res){//console.log(res.data.sites);//console.log(res.status+'成功了');$scope.datas=res.data.sites;//成功},function(res){//失败console.log(res.status+'失败了');}) })