文章目录
- 一、第一个Ajax程序
- 二、Ajax流程 - 对象的创建和兼容处理
- 1.if-else方法
- 2.try-catch方法
- A.try-catch方法讲解
- B.try-catch方法兼容处理
- 三、Ajax流程 - open方法和表单
- 1.open方法
- 2.表单
- 后端数据的接收
- A.get方法请求
- B.post方法请求
- C.REQUEST获取get或者post
- 四、Ajax流程 - 数据的获取
- 请求状态监控
- - onreadystatechange事件
- 五、应用中get和post的区别处理
- 1.get方式
- a.会出现缓存，所以要在url？后面加一个时间戳或者随机数
- b.出现乱码
- 2.post方式
- 六、附上Ajax的封装
Ajax： Asynchronous JavaScript and XML （中文翻译：异步JavaScript和XML）
即：用javascript异步形式去操作xml，完成数据交互。
一、第一个Ajax程序 话不多说，先附上一段代码，是请求1.txt里的内容
文章图片
>
window.onload = function(){
oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open('get', '1.txt',true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
}
结果如下：
文章图片
注意：
-1.我用的是appserv，和wamp大致一样-2.给网页命名的时候最好不要出现汉字-3.访问时直接localhost+自己的文件目录，省略www下面来讲解一下每一步的操作，我将重点的步骤，注释在代码旁边，请自行理解
oBtn.onclick = function(){
var xhr = new XMLHttpRequest();
//打开浏览器
xhr.open('get', '1.txt',true);
//在地址栏输入地址
xhr.send();
//提交并发送请求
xhr.onreadystatechange = function(){//等待服务器返回内容
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
二、Ajax流程 - 对象的创建和兼容处理 从上边的代码可以看出，第一步是打开浏览器
打开浏览器我们需要做的重要一步是创建Ajax对象----XMLHttpRequest; ( chrome和 firefox 和ie7，8都可以)
注意: ie6以下是
new ActiveXObject(‘Microsoft.XMLHTTP’)所以为了适应所有浏览器，我们可以将打开浏览器这一步做兼容性处理
1.if-else方法
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
2.try-catch方法 A.try-catch方法讲解 代码在try中尝试执行这个块中的内容,如果有错误，则会执行catch{}， 并且传入错误信息参数
例：
alert(a);
alert('到这里了');
这段代码会出错，因为没有定义a，我们可以看看错误信息：
文章图片
但是利用try-catch之后
try {
alert(a);
} catch (e) {
alert(1);
//1
}alert('到这里了');
//到这里了
浏览器会依次弹出 1 和 到这里了
注意: e为错误信息
try {
alert(a);
} catch (e) {
alert(e);
}
结果：
文章图片
B.try-catch方法兼容处理
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
三、Ajax流程 - open方法和表单 1.open方法 open方法有三个参数：
参一：打开方式
参二：地址
参三：是否异步
-异步:非阻塞 前面的代码不会影响后面代码的执行 true-同步:阻塞 前面的代码会影响后面代码的执行 false在实际过程中我们选取异步，避免堵塞
2.表单 类似的，表单也有三个参数：
表单：数据的提交
参一： action : 数据提交的地址，默认是当前页面
参二： method : 数据提交的方式，默认是get方式
-1.get把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面
-2.post参三： enctype : 提交的数据格式，默认为application/x-www-form-urlencoded
注意：
后端数据的接收
$ GET通过URL传递给该脚本的变量的数组
$ POST通过HTTP POST方法(表单)传递给该脚本的变量的数组
要求：
-前后台键名和传输方式必须一致-数据传输方式-数据获取方式A.get方法请求
新建一个文件，名字为1.get.php
以下是php内容：
当输入leo 34 后：
文章图片
输出为：
文章图片
B.post方法请求 post方法时，需要注明method为post，并且修改php内的语法
修改1.post.php内的语法：
内容和上面一致。
C.REQUEST获取get或者post 无论get或者post都可以利用REQUEST来获取
内容和上面一致。
四、Ajax流程 - 数据的获取 请求状态监控 - onreadystatechange事件 1.readyState属性：请求状态
- 0 (初始化)还没有调用open()方法-1(载入)已调用send()方法，正在发送请求-2 (载入完成) send()方法完成， 已收到全部响应内容-3 (解析)正在解析响应内容-4 (完成)响应内容解析完成，可以在客户端调用了status属性:服务器(请求资源)的状态返回的内容2. responseText：返回以文本形式存放的内容
3.responseXML ：返回XML形式的内容
4.status : 服务器状态，http状态码（404）
因此我们可以将请求成功进行细致化：
xhr.onreadystatechange = function() {if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。
alert( xhr.responseText );
} else {
alert('出错了,Err：' + xhr.status);
}
}}
五、应用中get和post的区别处理 1.get方式 a.会出现缓存，所以要在url？后面加一个时间戳或者随机数
xhr.open(‘get’,‘2.get.php?username=leo&age=30&’ + new Date().getTime(),true);b.出现乱码 编码encodeURI
【初识Ajax之Ajax的原理和封装】xhr.open(‘get’,‘2.get.php?username=’+encodeURI(‘刘伟’)+’&age=30&’ + new Date().getTime(),true);2.post方式 类似于form，有三个参数
xhr.open(‘post’,‘2.post.php’,true);post方式，数据放在send()里面作为参数传递
但是在这之前需要利用setRequestHeader声明发送的数据类型,即：
xhr.open('post','2.post.php',true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('username=刘伟&age=30');
注意：
1.post没有缓存问题
2.无需编码
六、附上Ajax的封装
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
} }
}
推荐阅读
- 前端|AJAX学习笔记
- jQuery|jQuery使用手册(七)
- Java|＂ruby on rails＂ with ＂ajax＂
- app|AJAX
- springboot|axios（ajax），springboot 跨域携带session
- django|Django Ajax CSRF 认证 通过jquery统一设置 ajax post方法
- Json数据格式和转换插件
- Others|ajax开发框架介绍
- Ajax中的beforeSend函数使用