1. 云栖社区>
  2. PHP教程>
  3. 正文

ajax异步无刷新基础

作者:用户 来源:互联网 时间:2017-12-01 11:14:20

ajax异步基础刷新

ajax异步无刷新基础 - 摘要: 本文讲的是ajax异步无刷新基础, ajax的应用是非常多的,要实现数据前后端的交互,ajax是一个非常常用的技术哦,加油!## 同步和异步+ 同步:必须等待前面的任务完成,才能继续后面的任务;+ 异步:不受当前任务的影响。简单点说,当你去银行办业务,需要一个一个等叫号,轮



ajax的应用是非常多的,要实现数据前后端的交互,ajax是一个非常常用的技术哦,加油!
## 同步和异步
+ 同步:必须等待前面的任务完成,才能继续后面的任务;
+ 异步:不受当前任务的影响。
简单点说,当你去银行办业务,需要一个一个等叫号,轮到你才能你去办理,这就是同步;但是在你等叫号的过程中,你可以玩手机,这就是异步,不影响你的等候叫号。
## 异步更新网站
当我们访问一个普通的网站时,当浏览器加载完:HTML,CSS,JS以后网站的内容就固定了。如果网站内容发生更改必须刷新页面才能够看到更新的内容。而异步更新就是:我们在访问新浪微博时,当你看到一大半了,会自动帮我们加载更多的微博,同时页面并没有刷新,这就是ajax要实现的一个功能了。
## Ajax基础
### ajax概念与应用
+ Asynchronous Javascript And XML(异步JavaScript和XML),ajax并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttpRequest。
+ ajax使用的依旧是HTTP请求。
+ 一个完整的HTTP请求步骤:
- 请求的网址,方法get/post
- 提交请求内容数据,请求主体等
- 接收响应回来的内容
### ajax使用
+ 我们经常说的ajax五步使用法:
- 建立XMLHTTPRequest对象
- 使用open方法设置和服务器端交互的基本信息(设置提交的网址,数据,post提交的一些额外内容)
- 设置发送的数据,开始和服务器端交互(发送数据)
- 注册回调函数
- 更新界面(在注册的回调函数中,获取返回的数据,更新界面)
+ 首先写一个get请求代码尝试一下
```js
// 1创建异步对象
var ajaxObj = new XMLHttpRequest();
// 2设置请求的url以及请求的方法
ajaxObj.open('get','get.php');
// 3发送请求 发送请求
ajaxObj.send();
// 4注册回调事件(函数) 注册,设置的时候 不会被触发,只有在满足某些条件的时候才会被触发,类似的有点击事件,onload事件
// 状态改变事件
ajaxObj.onreadystatechange = function () {
// 5接收服务端返回的数据 并且使用(弹框,修改页面显示等等)
// 响应的数据
// console.log(ajaxObj.readyState);
/*
判断1:数据回来了
判断2:当前请求的页面是存在的 交互成功
*/
if (ajaxObj.readyState ==4&&ajaxObj.status==200) {
console.log(ajaxObj.responseText);
}
}
```
+ 写一个post代码尝试一下
```js
// 异步对象
var xhr = new XMLHttpRequest();
// 设置属性
xhr.open('post', 'post.php' );
// 如果想要使用post提交数据,必须添加
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 将数据通过send方法传递
xhr.send('name=fox&age=18');
// 发送并接受返回值
xhr.onreadystatechange = function () {
// 判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
```
+ 你可以自己先对比一下get和post请求的不同,试试看。
### ajax请求注意点
+ 创建XMLHttpRequest对象(兼容性写法)
```js
var request ;
if(XMLHttpRequest){
// 新式浏览器写法
request = new XMLHttpRequest();
}else{
//IE5,IE6写法
new ActiveXObject("Microsoft.XMLHTTP");
}
```
+ 发送请求
|方法| 描述|
| --- | --- |
|open(method,url,async) |规定请求的类型、URL 以及是否异步处理请求。method:请求的类型;GET 或 POST;url:文件在服务器上的位置;async:true(异步)或 false(同步)|
|send(string) |将请求发送到服务器。string:仅用于 POST 请求|
+ get提交多个数据格式:xxx.php?name=jack&skill=画画&friend=rose;
+ post请求注意点
如果想要像form表单提交数据那样使用POST请求,需要使用XMLHttpRequest对象的setRequestHeader()方法来添加 HTTP 头。然后在send() 方法中添加想要发送的数据。
+ onreadystatechange事件
当服务器给予我们反馈时,我们需要实现一些逻辑。
|属性| 描述|
| --- | --- |
| onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。|
| readyState |存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收;3: 请求处理中;4: 请求已完成,且响应已就绪|
|status |200: "OK";404: 未找到页面|
+ 服务器响应内容
如果响应的是普通字符串,使用responseText,如果响应的是XML,使用responseXML
|属性| 描述|
| --- | --- |
| responseText |获得字符串形式的响应数据。|
|responseXML|获得 XML 形式的响应数据。|
### 其他注意点
+ html标签自定义属性:W3C在h5把自定义属性规范化:data-*,前面是固定写法,*可以自定义,但是不支持大写;js获取的方式:DOMElement.dataset['*'];
+ document.querySelector('.starBox').style.background='url('+ajax.responseText+') no-repeat center/cover';设置背景时,可以使用/来设置:位置/背景图片大小。
如果你还想了解更多,可以查看[W3C Ajax基础](http://www.w3cschool.cn/asp/asp-ajax-intro.html)。
欢迎各位路过的大神们指点。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax , 异步 , 基础 刷新 ,以便于您获取更多的相关知识。