ajax中的open方法类似form:
表单：数据的提交
action: 数据提交的地址,默认是当前页面
method：数据提交的方式，默认是get方式
1.get
把数据名称和数据值用=连接，如果有多个的话，会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面（见效果图）
（数据的提交要对应，前端用get方式，后端也要用get方式）
url长度限制的原因，我们不要通过get方式传递过多的数据
2.post
理论上数量没有限制，
php.ini可以修改该数量，默认为post_max_size = 8M
enctype:提交的数据格式，默认是application/x-www-form-urlencoded
案例6-form_get.html
<body>
<form action="1.get.php">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" value="提交" />
</form>
</body>
1.get.php:
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_GET['username'];
$age = $_GET['age'];
echo "你的名字：{$username}，年龄：{$age}";
效果图展示：
6-表单get方式.gif
案例7-form_post方式.html
<form action="1.post.php" method="post">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" value="提交" />
</form>
1.post.php
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_POST['username'];
$age = $_POST['age'];
echo "你的名字：{$username}，年龄：{$age}";
7-form_post方式.gif
补充后端知识：
1）$_REQUEST:可以获取get方式提交过来的数据，也可以获取post方式提交的数据
Ajax过程具体说明：
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
//打开浏览器
/*
1.创建一个ajax对象
// 1) 先定义一个对象
var xhr = null;
// 2) 然后兼容性处理：
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//在地址栏输入地址
/*
2.创建一个新的HTTP请求，
并指定该HTTP请求的方法、URL及验证信息
*/
/*
open方法
参数：
1.打开方式
2.地址（发送请求的地址）
3.是否异步
异步:非阻塞 前面的代码不会影响后面代码的执行
同步:阻塞 前面的代码会影响后面代码的执行
*/
xhr.open('get','1.txt',true);
//提交 发送请求
//alert(1);
//4.发送HTTP请求；
xhr.send();
//alert(1)
//alert( xhr.responseText );
//等待服务器返回内容
//3.设置响应HTTP请求状态变化的函数；
xhr.onreadystatechange = function() {
//5.获取异步调用返回的数据；
if ( xhr.readyState == 4 ) {
alert( xhr.responseText );
}
}
}
}
- 同步:阻塞 前面的代码会影响后面代码的执行；(一个工作未完成是不会进行下一个的)
阻塞模式举例：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){}) //阻塞模式，只有jquery加载完才可以执行此行代码
</script>
- 异步:非阻塞 前面的代码不会影响后面代码的执行
非阻塞模式举例：
// 非阻塞模式
setTimeout(function(){
alert(1);
},2000);
alert(2);
网友评论