浏览器中为我们提供了一个 JS 对象 XMLHttpRequet,它可以帮助我们发送 HTTP 请求,并接受服务端的响应。
意味着我们的浏览器不提交,通过 JS 就可以请求服务器。ajax(Asynchronous Javascript And XML) 其实就是通过 XHR 对象,执行 HTTP 请求。1、创建 XHR 对象2、XHR 的对象属性和方法
- var xhr = new XMLHttpRequest(); //暂不考虑兼容
3、通过 XHR 对象发送 get 请求
- 方法:
- open("get/post", url, true/false);
- //有参数则k=v&k1=v1这种形式
- send(null);
- 属性:
- //代表请求状态,不断变化,为4时,请求结束
- readyState
- //响应的内容
- responseText
- //响应的状态码200,403,404
- status
- //状态文字
- statusText
- 事件:
- //当readyState变化时会触发此事件
- onreadystatechange = function() {};
ajax.php 如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- ajax
- </title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <div id="box">
- <input type="text" name="con" value="" id="con" />
- </div>
- </body>
- <script type="text/javascript">
- var ipt = document.getElementById("con");
- ipt.onblur = function() {
- var con = this.value;
- //创建XHR对象
- var xhr = new XMLHttpRequest();
- //设置请求URL
- var url = "./ajax.php?con=" + con;
- //设置XHR对象readyState变化时响应函数
- xhr.onreadystatechange = function() {
- //readyState是请求的状态,为4表示请求结束
- if (xhr.readyState == 4) {
- //responseText服务器响应的内容
- alert("服务器响应数据:" + this.responseText);
- }
- };
- //打开链接
- xhr.open("get", url, true);
- //发送请求
- xhr.send(null);
- }
- </script>
- </html>
填入数据,当鼠标焦点离开 input 时,触发请求,弹出响应内容。4、通过 XHR 对象发送 post 请求 (1)、open() 第 1 参数为 post(2)、POST 的参数以 k=v&k1=v1&k2=v2 的形式拼接,并用 send() 发送 (3)、必须要设置 Content-Type 为 application/x-www-form-urlencoded
- <?php
- $con = !empty($_GET['con']) ? trim($_GET['con']) : '没有数据';
- echo $con;
ajax.php 如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- ajax
- </title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <div id="box">
- <input type="text" name="name" value="" id="name" />
- <input type="password" name="pwd" value="" id="pwd" />
- <input type="submit" name="sub" value="提交" id="sub" />
- </div>
- </body>
- <script type="text/javascript">
- var sub = document.getElementById("sub");
- sub.onclick = function() {
- var name = document.getElementById("name").value;
- var pwd = document.getElementById("pwd").value;
- //创建XHR对象
- var xhr = new XMLHttpRequest();
- //设置请求URL
- var url = "./ajax.php";
- //设置XHR对象readyState变化时响应函数
- xhr.onreadystatechange = function() {
- //readyState是请求的状态,为4表示请求结束
- if (xhr.readyState == 4) {
- //responseText服务器响应的内容
- alert("服务器响应数据:" + this.responseText);
- }
- };
- //打开链接
- xhr.open("post", url, true);
- //设置请求头部
- xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
- //发送请求
- xhr.send("name=" + name + "&pwd=" + pwd);
- }
- </script>
- </html>
单击 submit 后发送 post 请求,弹出响应信息。5、返回值 json,html,text,xml 返回值只有两种 text,和 xml。不过 text 内容中可以是一段 html 或 json 结构的字符串。(1)、返回 json 格式
- <?php
- $name = !empty($_POST['name']) ? trim($_POST['name']) : '没有数据';
- $pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '没有数据';
- echo '用户名:', $name, '密码:', $pwd;
ajax.php 如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- ajax
- </title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <div id="box">
- <select id="city">
- </select>
- <input type="button" value="获取" id="get" />
- </div>
- </body>
- <script type="text/javascript">
- var get = document.getElementById("get");
- var city = document.getElementById("city");
- get.onclick = function() {
- //创建XHR对象
- var xhr = new XMLHttpRequest();
- //设置请求URL
- var url = "./ajax.php";
- //设置XHR对象readyState变化时响应函数
- xhr.onreadystatechange = function() {
- //readyState是请求的状态,为4表示请求结束
- if (xhr.readyState == 4) {
- //responseText服务器响应的内容
- //通过eval把传来的json字符串转成对象
- var data = eval(this.responseText);
- var str = "";
- for (var ix in data) {
- str += "<option value='" + data[ix].id + "'>" + data[ix].name + "</option>";
- }
- city.innerHTML = str;
- }
- };
- //打开链接
- xhr.open("get", url, true);
- //发送请求
- xhr.send(null);
- }
- </script>
- </html>
(2)、返回 xml 格式 xml 通过 responseXML 来读取,responseXML 不是字符串,是 DOM 对象。
- <?php
- $data = array(
- array('id' => 1, 'name' => '上海'),
- array('id' => 2, 'name' => '北京'),
- array('id' => 3, 'name' => '深圳'),
- );
- echo json_encode($data);
ajax.php 如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- ajax
- </title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <div id="box">
- <div id="news">
- </div>
- <input type="button" value="获取" id="get" />
- </div>
- </body>
- <script type="text/javascript">
- var get = document.getElementById("get");
- var news = document.getElementById("news");
- get.onclick = function() {
- //创建XHR对象
- var xhr = new XMLHttpRequest();
- //设置请求URL
- var url = "./ajax.php";
- //设置XHR对象readyState变化时响应函数
- xhr.onreadystatechange = function() {
- //readyState是请求的状态,为4表示请求结束
- if (xhr.readyState == 4) {
- //responseXML服务器响应的内容
- var data = this.responseXML;
- var str = "";
- var title = data.getElementsByTagName("title");
- str += "<p>" + title[0].childNodes[0].nodeValue + "</p>";
- str += "<p>" + title[1].childNodes[0].nodeValue + "</p>";
- str += "<p>" + title[2].childNodes[0].nodeValue + "</p>";
- news.innerHTML = str;
- }
- };
- //打开链接
- xhr.open("get", url, true);
- //发送请求
- xhr.send(null);
- }
- </script>
- </html>
6、ajax 的同步与异步通过设置 open() 的第三个参数 true/false,来查看请求的效果。同步请求:发送请求 -> 等待结果 -> 操作完成 -> 继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码,严格按照步骤一步一步执行。异步请求:发送请求 -> 继续后面代码 -> 响应结果接收完毕 -> 操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码,也就是说在结果返回之前用户可以操作其他东西。
- <?php header('Content-Type: text/xml;charset=utf-8'); $xml=< <<EOD <?xml
- version="1.0" encoding="utf-8" ?>
- <news>
- <title>
- 111
- </title>
- <title>
- 222
- </title>
- <title>
- 333
- </title>
- </news>
- EOD; echo $xml;
来源: