知识点:
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() {
//打开浏览器
/*
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}";