初识ajax

mac2024-05-07 128

废话不多说先来看一个ajax的小案例：

整体案例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX初识</title> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById("btn"); btn.onclick = function() { //获取用户的用户名和密码 // var uname = document.getElementById("username").value; var pass = document.getElementById("pass").value; //使用ajax发送请求需要如下几步 //1.创建XMLHttpRequest对象 ajax的核心对象 var xhr = new XMLHttpRequest(); //2.准备发送 xhr.open('get','01check.php?username=' + uname + '&password=' + pass, true); //3.执行发送 xhr.send(null); //4.指定回调函数 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // 4XX 找不到 2XX成功 5XX 服务器错误 if(xhr.status = 200) { var data = xhr.responseText; var info = document.getElementById("info"); if (data == "1") { info.innerHTML = '登录成功' } else { info.innerHTML = '用户名或密码错误'; } } } } } } </script> </head> <body> <form> 用户名: <input type="text" name="username" id="username"> <span id="info"></span> <br /> 密码: <input type="password" name="pass" id="pass"> <input type="button" value="登录" id="btn"> </form> </body> </html> <?php //先拿到数据 $uname = $_POST['username']; $pass = $_POST['password']; //死数据 if($uname == "admin" && $pass = "123") { echo "1"; }else { echo "2"; } ?>

第一步：Ajax核心对象的解析

XMLHttpRequest 是建立客户端和服务器端的通信

var xhr = new XMLHttpRequest(); //标准浏览器 ie7-11 chrome firefox var xhr = new ActiveXObject("Microsoft.XMLHTTP") //IE6的写法

所以我们创建Ajax的标准写法就是：

//创建核心对象的标准写法 var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); //标准浏览器的写法 } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6 }

非标准写法是使用try和catch：

//非标准写法异常捕获机制 try { xhr = new XMLHttpRequest(); } catch { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }

第二步：准备发送

//2.准备发送 /* 参数一: 请求方式(get获取数据 post提交数据) 参数二: 请求地址参数三: 同步或者异步的标识符默认是true 表示异步 false表示同步如果是get请求就会把参数放在URL(Unifrom Resource Location 同一资源定位符)中传递 encodeURI() 用来对中文参数进行编码防止出现乱码 */ //这里的请求方法时get方法，post请求方法放在下一步去讲 xhr.open('get','01check.php?username=' + encodeURI(uname) + '&password=' + pass, true); //这是下一步的执行发送，但是他是get请求的执行发送 xhr.send(null);

get和post的请求的区别： get：我们可以看成get是把数据放在信封上，传递的速度快，因为不用打开信封就可以看到，但是谁都可以看到所以是不安全的，并且传递的数据是有长度的 post：可以看成是把数据放在信封里面用信纸写的，同理我们要先打开信封，所以传递速度相对较慢，也比较安全，并且传递的数据是没有长度限制的。

第三步执行发送

//3.执行发送 //post 请求参数放在send中传递不需要进行编码encodeURI转码 //post 请求必须设置请求头信息 //post 请求必须设置请求头信息 //post 请求必须设置请求头信息，这个很重要 xhr.open('post','01check.php', true); //出现乱码时，请求头部信息 // mime text/plain----纯文本 text/html----html // header("Content-type: text/html; charset=utf-8"); //setRequestHeader 是设置HTTP请求头部的方法 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //这里不需要记住，只要知道使用post时要添加这句代码就行 var param = "username=" + uname + "&password=" + pass; xhr.send(param);

第四步指定回调函数

//4.指定回调函数 xhr.onreadystatechange = function() { /* readyState 0 对象(XMLHttpRequtest)创建成功 1 表示已经发送了请求 2 浏览器已经收到了服务器响应的数据 3 正在解析数据 4 数据解析完成可以使用了 */ if (xhr.readyState == 4) { // 4表示服务器返回的数据已经可以使用了但是并不意味着我们的数据是正常 // 4XX（比如404）找不到 2XX（比如200）成功 5XX（比如500）服务器错误 if(xhr.status = 200) { /* http常见的状态值 200 表示响应成功 404 表示没有找到对应资源 500 表示服务器端错误 */ var data = xhr.responseText; console.log(xhr.responseText); var info = document.getElementById("info"); if (data == "1") { info.innerHTML = '登录成功' } else { info.innerHTML = '用户名或密码错误'; } } } }

最新回复(0)