#### 1. 能够理解异步的概念
- Ajax:
> 是一种在无需重新加载整个网页的情况下，能够更新部分（异步请求）网页的技术
1. 可以完成html到后台的异步请求---局部刷新页面
2. 可以获取到后台返回的数据进行展示
3. 应用场景：
#### 2. 能够了解原生js的ajax:weary:
- ！一定不要去敲这个代码，重点去理解步骤
- 基于原生JS方式实现：
- 创建异步对象
```java
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
```
- 建立连接
```javascript
/*
参数：
1. 请求方式：GET、POST
* get方式，请求参数在URL后边拼接。send方法为空参
* post方式，请求参数在send方法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);//不需要写/
```
- 发送请求
```javascript
xmlhttp.send();
```
- 接收数据
```javascript
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
```
#### 3. 能够使用jQuery的$.ajax()进行访问
- 通用的方式
```javascript
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
```
|
|
收藏
淘帖
踩
