AJAX请求
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术:
- 这里介绍一下AJAX发送请求(POST)
- POST比GET提交方式更安全,不会在网址中显示信息
首先我们看一下效果
常见场景:输入用户名和密码
在用户登录时,这是最常见的用法。接下来,我们看看代码吧。
首先,老规矩,咱们写一个简单的PHP服务
PHP部分
代码如下:
<?php
$stuName = $_REQUEST['stuName'];
$score = $_REQUEST['score'];
$output = $stuName.'-'.$score.'-'.uniqid();
// 数据库插入语句
echo $output;
?>
这里仅是一个demo,用于举例。
接着,我们看HTML部分。HTML的代码很简单,就不说了,直接上代码:
HTML部分
代码如下:
用户: <input type="text" class="stuName"><br>
密码: <input type="text" class="score"><br>
<input type="button" value="保存" class="save">
<p style="display: none">提示文字: <span id="ts"></span></p>
接下来我们进入AJAX部分。
- AJAX发送请求分为四个步骤,万变不离其宗:
1.建立连接
var xhr;
if (window.XMLHttpRequest){// 兼容 IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else {// 兼容 IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2.绑定监听函数
xhr.onreadystatechange = function(){
//内容
}
3.创建请求
xhr.open("GET","01.txt",true)
// xhr.open("请求方式","test1.txt",true);
// GET:一般用于查询,所有的内容全部暴露地址栏中,2000来个字符
// POST:一般用于存储或者修改服务器数据,请求体重,理论上网速好的情况下不限制大小
// 第二个参数:请求的地址
// 第三个参数:boolean 默认为true,不写也为true,表示异步,false表示同步
4.发送数据
xhr.send(null);
// xmlhttp.send(); 发送数据
// 有数据的时候写在send参数里,没有就不写或者'null'
与GET请求不同,POST请求必须设置请求头
注意:页面需要在服务器上打开,这里用的Apache服务器
AJAX部分
代码如下:
<script>
var stuName = document.getElementsByClassName("stuName")[0];
var score = document.getElementsByClassName("score")[0];
var save = document.getElementsByClassName("save")[0];
var ts = document.getElementById("ts");
save.addEventListener("click",function(){
// 1.
var xhr = null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xhr =new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.绑定监听
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
console.log('成功,响应的文本内容为' + xhr.responseText);
document.getElementsByTagName("p")[0].style.display = 'block';
ts.innerHTML = xhr.responseText;
stuName.value = "";
score.value = "";
}else{
alert("出错" + xhr.status);
}
}
}
// 3.
xhr.open('POST','03.php',true);
// 3.5 POST发送请求必须设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// application/x-www-form-urlencoded 表单字符类型
// multiline/form-data 表单类型
// application/json
// text/xml
// 4.
// 有数据的时候写在send参数里,没有就不写或者'null'
xhr.send("stuName=" + stuName.value + "&score=" + score.value);
})
</script>
很简单易懂吧~ 嘿嘿,不吝惜给我点个赞好不~