博客

前端入门学习总结

Ajax全称为“Asynchronous(异步) JavaScript And XML”


是指一种创建交互式网页应用的开发技术，通过在 后台与服务器进行少量数据交互，实现网页的异步更新，在不重新加载整个界面的情况下，做到网页的部分刷新，极大地改善了用户体验。

jQuery对Ajax操作进行了封装，我们不需要考虑兼容和跨域的问题了。在jQuery中$.ajax()属于最底层的方法，load()，$.get()和$.post()属于第二层。

load()

load()方法是最简单和常用的ajax方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

URL

：（必选） 加载的 URL地址。


Data

：（可选） 规定与请求一同发送的查询字符串key/value对集合。


Callback

: （可选）是 load()方法完成后所执行的函数名称

载入远程HTML代码并插入DOM中

$('.box').load('./test.txt');

筛选载入的HTML文档

例如：在load_01.html中

<h1>我是另一个HTML文件里的内容</h1>
<span class="txt">load()方法简单且功能强大</span>

在load_02.html中载入：

$('.box1').load('./load_01.html h1');
$('.box2').load('./load_01.html .txt');

载入结果如下图所示：

$.get()

$.get()方法使用GET方式来进行异步请求。

参数以对象的形式存在，可以有4个参数，


url

：（必选）请求的地址 ，


data

：（可选）发送至服务器的对象数据


dataType

：（可选）服务器端返回的数据格式，包括xml、html、 script、 json、

text和default


success

: （可选）请求成功时的回调函数,

function(data,textStatus){}


有两个参数：data:返回的内容，textStatus请求的状态

$.get({
url:'./get.php',  //请求的地址
data:{name:"李白",age:18},  //发送至服务器的对象数据
dataType:'json', //服务器端返回的数据格式
success:function(data,textStatus){   //请求成功时的回调函数
console.log(data,textStatus);
}
})

get.php中：

<?php
 $name=$_GET['name'];
 $age=$_GET['age'];
$arr=[
	'data'=>[
		'name'=> $name,
		'age'=> $age,
	]
];
echo json_encode($arr);
?>

或者

$.get({
		url:'./data.json',
		success:function(data){
				console.log(data);
			}
	  })

data.json里

{
	"name": "李白",
	"age": "20"
}

dataType是html时

姓名：<input type="text" id="username" name="username" />
年龄：<input type="text" id="userage" name="userage" />
<textarea id="text"></textarea>
<button type="button">发送请求</button>

<script type="text/javascript">
$('button').click(function(){
$.get({
url:'./get.php',
data:{
username:$('#username').val(),
userage:$('#userage').val()
},
dataType:'html',
success:function(data){
$('#text').html(data)
}
})
})
</script>

$.post()

**

$.post()方法使用POST方式来进行异步请求。它的结构和用法与

$.get()方法类似。**

$.post({
url:'./post.php',  //请求的地址（必选）
data:{name:"李白",age:18},  //发送至服务器的对象数据
dataType:'json', //服务器端返回的数据格式
success:function(data,textStatus){   //请求成功时的回调函数
console.log(data,textStatus);
}
})

post.php中：

<?php
$name=$_POST['name'];
$age=$_POST['age'];
$arr=[
	'data'=>[
		'name'=> $name,
		'age'=> $age,
	]
];
echo json_encode($arr);
?>

请求结果如图所示：

$.ajax(options)

该方法只有1个参数，参数以对象的形式存在，但在这个对象里包含了

$.ajax()方法所需要的请求设置以及回调函数等信息，

$.ajax()返回其创建的XMLHttpRequest 对象，所有参数都是可选的，常用参数有：

$('button').click(function(){
$.ajax({
type: "post", //请求方式(如POST或GET,默认是GET)

url: "./get.php", //发送请求的url地址

data: {name:"李白",age:18}, //参数值,对象格式,会转换成&name=李白$age=18

dataType: "json", //返回格式为json

async: true, //请求是否异步，默认为异步，这也是ajax重要特性

timeout:500, //设置请求超时时间  异步请求时,请求超时会报错

processData: true, //对data数据是否进行序列化

contentType: false, //dataType设置收到服务器数据的格式

beforeSend: function (XMLHttpRequest) { //请求前的处理
console.log(XMLHttpRequest);
},



success: function (data,textStatus) {//请求成功时处理
console.log(data,textStatus);
},

complete: function (XMLHttpRequest,textStatus) {
//请求完成的调用的回调函数,无论请求成功或失败都会调用
console.log(XMLHttpRequest,textStatus);
},

error: function (XMLHttpRequest,textStatus,errorThown) {
console.log(XMLHttpRequest,textStatus,errorThown);
//请求出错处理
}
});
console.log("同步执行代码");
})

$.ajax()实现跨域请求

不支持代理方式的跨域请求

支持jsonp跨域请求

$.ajax({
type: "GET",
url: "https://api.asilu.com/weather/",
dataType: "jsonp", //预期服务器返回的数据类型  JSONP格式
success: function (data,textStatus) {
console.log(data,textStatus);
}
})