您的位置：首页 > Web前端 > JavaScript

AJAX 基本内容1

2016-07-28 00:00 387 查看

摘要: AJAX DAY01:基本内容

AJAX Day01 基本内容

基本内容
1.同步交互与异步交互
1.1同步交互
客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户是不能做任何其他事情(等).

1.2异步交互
客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不等)
2.AJAX
2.1Asynchronous JavaScript and Xml
直译中文 - javascript和XML的异步
(不严格的定义)客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax
Ajax实现的是B/S架构下的异步交互

2.2实现异步交互的技术

同步与异步的区别
2.2.1同步交互
执行速度相对比较慢
响应的是完整的HTML页面
2.2.2异步交互
执行速度相对比较快
响应的是部分数据
3.Ajax具有核心对象
3.1XMLHttpRequest对象

创建XMLHttpRequest对象

function getXhr(){
// 声明XMLHttpRequest对象
var xhr = null;
// 根据浏览器的不同情况进行创建
if(window.XMLHttpRequest){
// 表示除IE外的其他浏览器
xhr = new XMLHttpRequest();
}else{
// 表示IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
// 创建核心对象
var xhr = getXhr();


4.Ajax的核心对象
4.1属性
readyState
status
 4.2方法
open() - 与服务器端建立连接
send() - 向服务器端发送请求
 4.3事件
onreadystatechange事件
作用 - 监听服务器端的通信状态改变

5.实现Ajax的异步交互步骤
5.1创建XMLHttpRequest核心对象
固定写法 getXhr()函数
5.2与服务器端建立连接
5.2.1使用XMLHttpRequest对象的open(method,url)方法
method - 设置当前请求的类型
url - 设置当前请求的地址
5.2.2向服务器端发送请求
使用XMLHttpRequest对象的send(请求参数)方法
请求参数的格式 - key=value
5.2.3接收服务器端的响应数据
使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态

使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)

使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)

使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据
5.2.4GET与POST的区别
GET请求类型
send()方法不起作用,但是不能被省略
xhr.send(null);
请求参数 - 添加到URL?key=value
5.2.5POST请求类型
send()方法起作用
在send()方法被调用前,使用setRequestHeader()方法设置请求头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

如下

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AJAX基础练习</title>
</head>
<body>
<div id="content" style="width: 400px;font-size: 32px;background: #21add1;"></div>
<input type="button" value="异步请求练习" id="btn"/>
<script>
document.getElementById("btn").onclick = function () {
/*1.获得XMLHttpRequest对象，在下方实现getXhr函数*/
var xhr = getXhr();
/*2.与服务器建立连接
* open(method,url,async)方法
* *method-设置当前的请求方式 GET OR POST；
* *url-设置当前的请求地址
* *async-设置是否异步 boolean类型
*       默认值是true 表示异步
*       官方认为使用XMLHttpRequest对象就是为了实现异步交互的
* */
xhr.open("GET", "test1.php?user=zhangwuji");
/*3.客户端向服务器发送请求
* send(请求参数) 方法
* 请求参数的格式为  key=value;
* 如果请求类型为GET
*  send()方法是不能向服务器 发送请求数据的
*
*   ！！！send（）方法不能被被省略的，
*      GET请求类似 send(null);
* */
xhr.send(null);
/*4.客户端接收服务器的响应
* 使用 onreadystatechange事件
* 监听服务器通讯状态
* readyState属性
* 得到服务器端当前通信状态
* 0 未初始化
* 1正在接收
* 2接收完成
* 3正在响应
* 4响应完成
* status 状态码
* 200 OK
*
* responseText属性  （报文）
* 接收服务器端的数据 （html格式）
* */
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var data=xhr.responseText;
document.getElementById("content").innerHTML=data;
}
}

};

function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest;
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript ajax

相关文章推荐

新的分享

章节导航