AJAX原理及封装
2016-05-30 13:35
309 查看
知识点：
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 src="jquery.js"></script>-->
<script>
//$(function(){}) //阻塞 -> 同步
//非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000);
alert(2);*/
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
//打开浏览器
/*
4000
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}";
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 src="jquery.js"></script>-->
<script>
//$(function(){}) //阻塞 -> 同步
//非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000);
alert(2);*/
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
//打开浏览器
/*
4000
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}";
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Web布局连载——两栏固定布局（五）
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- 盒子模型
- CSS选择器
- CSS样式优先权
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- HTML5调用摄像头实例
- 使用Ajax实现异步用户名验证
- 使用ajax实现用户登录验证（升级版）