什么是 Ajax?
Asynchronous JavaScript and xml
也就是异步的 JavaScript 和 xml
Ajax 的使用场景
前台获取数据
表单失焦验证
我们需要了解 post 和 get 区别
get 参数是在地址栏中, 大小 2000 个字符左右
post 参数是在请求体中, 网速良好, 理论上是无限大的
如何构建一个完整的 Ajax 请求
注意: 一般情况下只能在有服务的环境下发送请求
Ajax 是局部刷新
1. 创建 Ajax 对象
var xhr = new XMLHttpRequest(); 新版本的浏览器
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 老版本的 IE
兼容写法:
- var xhr;
- if(Windows.XMLHttpRequest){ // 常规, 如果有, 直接使用
- xhr = new XMLHttpRequest();
- }else{ // 如果没有, 老版本 IE
- xhr = new ActiveXObject("Microsoft.XMLHTTP");
- }
这里我们需要先了解状态码和回应码
xhr.status 可获取响应码
xhr.readyState 可获取状态码
xhr.responseText 可以获取响应文本
状态码:
•0: 请求未初始化
•1: 服务器连接已建立
•2: 请求已接收
•3: 请求处理中
•4: 请求已完成, 且响应已就绪
响应码:
1xx 信息类
2xx 成功 200
3xx 重定向 304
4xx 客户端错误 404
5xx 服务端错误
2. 绑定监听函数
xhr.onreadystatechange = function(){
当 xhr.readyState == 4 || xhr.status== 200 时
可以获取 xhr.responseText 响应文本
然后通过响应文本来执行要求
}
3. 创建请求的消息, 连接服务器 此时状态码由 0 变成了 1
xhr.open('提交方式: get 或 post','链接地址',bool 值);
boll 为 true 异步; false 同步
4. 发送请求
xhr.send(null);
如果是 post 请求, 就放 post 参数, 如果是 get 请求, 发送 null 就行了
这样就是一个完整的 Ajax 请求了
实例:
使用 Ajax 发送 get 请求
html 结构如下
- 用户名:<input type="text" id="username">
- <span id="ts"></span>
- <br>
- 密码:<input type="text">
- <button id="btn"> 验证用户名 </button>
- <script>
- var username = document.getElementById("username");
- var btn = document.getElementById("btn");
- var ts= document.getElementById("ts");
- // 点击 btn 发送 Ajax 请求
- btn.onclick = function(){
- // 1. 创建 xhr
- var xhr;
- if(Windows.XMLHttpRequest){ // 常规, 如果有, 直接使用
- xhr = new XMLHttpRequest();
- }else{ // 如果没有, 老版本 IE
- xhr = new ActiveXObject("Microsoft.XMLHTTP");
- }
- // 2. 绑定监听函数
- xhr.onreadystatechange = function(){
- if(xhr.readyState == 4){
- if(xhr.status == 200){
- console.log(xhr.responseText)
- if(xhr.responseText == 1){
- ts.innerHTML = "该用户名已经被注册"
- }else if(xhr.responseText == 0){
- ts.innerHTML = "该用户名可以使用"
- }
- }
- }
- }
- // 3. 建立连接
- xhr.open("GET","08.php?uname=" + username.value,true);
- // 正则验证
- // 4. 发送请求
- xhr.send(null)
- }
- </script>
然后用 PHP 模拟一个数据库
- <?PHP
- $db = ['jack','mack','mary']; // 模拟数据库
- $username = $_GET['uname']; // 表示从前台传递过来的参数
- $flag = false;
- foreach($db as $n){
- if($n === $username){
- $flag = true;
- break;
- }
- }
- if($flag){
- echo "1";
- }else{
- echo "0";
- }
- ?>
使用 Ajax 发送 post 请求
HTML 代码:
- 学生姓名:<input type="text" id="uname"><br>
- 学生成绩:<input type="text" id="score"><br>
- <button id="btn"> 注册 </button>
- <p id="p01"></p>
- <script>
- function get_id(id){
- return document.getElementById(id);
- }
- var uname = get_id("uname");
- var score = get_id("score");
- var btn = get_id("btn");
- var p01 = get_id("p01");
- btn.onclick = function(){// 1.
- var xhr;
- if(Windows.XMLHttpRequest){ // 常规, 如果有, 直接使用
- xhr = new XMLHttpRequest();
- }else{ // 如果没有, 老版本 IE
- xhr = new ActiveXObject("Microsoft.XMLHTTP");
- }
- // 2.
- xhr.onreadystatechange = function(){
- if(xhr.readyState == 4){
- if (xhr.status == 200) {
- p01.innerHTML = xhr.responseText;
- }
- }
- // 3.
- xhr.open('POST','http://localhost:8888/0220ajax/09.php',true);
- // 3.5 在发送 post 请求的时候, 你得告诉服务器你发送的是一个什么
- xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- // 4. 发送
- xhr.send('strName=' + uname.value + '&strScore=' + score.value);
- }
- }
- </script>
PHP 代码:
- <?PHP
- $uName = $_POST['strName'];
- $uScore = $_POST['strScore'];
- // 此时, PHP 已经拿到了学生的名字和分数
- // 存到数据库
- $output = $uName.'-'.$uScore.'-'.uniqid();
- echo $output;
- ?>
来源: http://www.bubuko.com/infodetail-2968861.html