AJAX原理及封装

最新推荐文章于 2024-09-03 21:43:51 发布

小允子

最新推荐文章于 2024-09-03 21:43:51 发布

阅读量275

点赞数

本文链接：https://blog.csdn.net/qq_26297581/article/details/51537302

版权

AJAX 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

知识点：

1. ajax : Asynchronous JavaScript and XML 异步JavaScript和XML，即用javascript异步形式去操作xml。功能是进行数据交互

2.try {

} catch (e) {

}如果有错误，则会执行catch{}，并且传入错误信息参数。 ,如果不用这个语句用if{}else{}，如果程序出错，程序会终止。就不会继续往下执行

3.//打开浏览器
/*
1.创建一个ajax对象
ie6以下new ActiveXObject('Microsoft.XMLHTTP')

2.标准浏览器下，XMLHttpRequest（）
*/
var xhr = null;
/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}*/
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

4.表单：数据的提交
三个属性
action : 数据提交的地址，默认是当前页面
method : 数据提交的方式，默认是get方式
1.get
把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面

get方法url长度限制：不要通过get方式传递过多的数据
2.post

与get一样，只需要把get改成post即可。理论上无限制

3.request

既能获得get方式的数据也能获得post方式数据

enctype : 提交的数据格式，默认application/x-www-form-urlencoded
<form action="1.get.php" enctype="application/x-www-form-urlencoded">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" value="提交" />
</form>

5.//在地址栏输入地址
/*
open方法
参数
1.打开方式
2.地址
3.是否异步
异步:非阻塞前面的代码不会影响后面代码的执行
同步:阻塞前面的代码会影响后面代码的执行

true 默认异步，false默认同步
*/
xhr.open('get','1.txt',true);

6. //等待服务器返回内容
/*
* 请求状态监控
onreadystatechange事件
readyState属性：请求状态
0 （初始化）还没有调用open()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了
status属性：服务器(请求资源)的状态
返回的内容
responseText：返回以文本形式存放的内容
responseXML：返回XML形式的内容

readyState : ajax工作状态
responseText : ajax请求返回的内容就被存放到这个属性下面
on readystate change : 当readyState改变的时候触发
status : 服务器状态，http状态码
*/
xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert('出错了,Err：' + xhr.status);
}

}

7 . /*get方式两个问题（从服务器获取内容，存在缓存问题，第二次在缓存中找，如果后台修改，结果也不会变化）
1.缓存在url？后面连接一个随机数，时间戳。。&不能别忘记。new Date().getTime()随机数
2.乱码编码encodeURI，如果不用encodeURI，输入中文无法识别
*/
xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);

8. /* post方式问题（向服务器提交内容，不存在缓存问题）
post方式数据放在send（）方法中，然后setRequstHeader()方法告诉发送的数据类型*/
xhr.open('post','2.post.php',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('username=leo&age=30');

9. 完整的程序

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
//$(function(){}) //阻塞 -> 同步

//非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000);

alert(2);*/

window.onload = function() {

var oBtn = document.getElementById('btn');

oBtn.onclick = function() {

//打开浏览器
/*
1.创建一个ajax对象
ie6以下new ActiveXObject('Microsoft.XMLHTTP')
*/
var xhr = null;
/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}*/
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

//alert( xhr.readyState );
//在地址栏输入地址
/*
open方法
参数
1.打开方式
2.地址
3.是否异步
异步:非阻塞前面的代码不会影响后面代码的执行
同步:阻塞前面的代码会影响后面代码的执行
*/
/*get方式两个问题（从服务器获取内容，存在缓存问题，第二次在缓存中找，如果后台修改，结果也不会变化）
1.缓存在url？后面连接一个随机数，时间戳。。&不能别忘记。new Date().getTime()随机数
2.乱码编码encodeURI，如果不用encodeURI，输入中文无法识别
*/
/* post方式问题:（向服务器提交内容，不存在缓存问题）
post方式数据放在send（）方法中，然后setRequstHeader()方法告诉发送的数据类型*/
// xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
//提交发送请求
// xhr.send();
xhr.open('post','2.post.php',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('username=leo&age=30');

//等待服务器返回内容
/*
* 请求状态监控
onreadystatechange事件
readyState属性：请求状态
0 （初始化）还没有调用open()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了
status属性：服务器(请求资源)的状态
返回的内容
responseText：返回以文本形式存放的内容
responseXML：返回XML形式的内容

readyState : ajax工作状态
responseText : ajax请求返回的内容就被存放到这个属性下面
on readystate change : 当readyState改变的时候触发
status : 服务器状态，http状态码 200 ok
*/
xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert('出错了,Err：' + xhr.status);
}
}

}

}
}
</script>
</head>

<body>
<input type="button" value="按钮" id="btn" />
</body>
</html>

2.get.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_GET['username'];
$age = $_GET['age'];

echo "你的名字：{$username}，年龄：{$age}";

2.post.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_POST['username'];
$age = $_POST['age'];

echo "你的名字：{$username}，年龄：{$age}";

小允子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX原理及封装

知识点：1. ajax : Asynchronous JavaScript and XML 异步JavaScript和XML，即用javascript异步形式去操作xml。功能是进行数据交互2.try {} catch (e) {}如果有错误，则会执行catch{}，并且传入错误信息参数。 ,如果不用这个语句用if{}else{}，如果程序出错，程序会终止。就不会继续往下执
复制链接

扫一扫

专栏目录