一、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, html2.jQuery.post(...)所有参数：url: 待载入页面的URL地址data: 待发送 Key/value 参数success: 载入成功时回调函数dataType: 返回内容格式，xml, json, script, text, html3.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+'失败了');
})})
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
