1. Ajax
Asyn Javascript And Xml “异步的 JS 和 xml”
请求: 客户端向服务器请求一个文件
传统的请求: 通过地址栏 刷新页面请求
2. XMLHttpRequest对象 XHR 2.1 概念 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
2.2 常用属性 1. readyState 请求响应状态
状态
名称
描述
0
Uninitialized
初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1
Open
open() 方法已调用，但是 send()
2
Sent
Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3
Receiving
所有响应头部都已经接收到。响应体开始接收但未完成。
4
Loaded
HTTP 响应已经完全接收。
2. status 返回服务器的响应状态码
200 成功响应
404 文件不存在
304 文件来自缓存
500 服务器未知错误
503 服务器宕机 服务暂时不可用
3. responseText 获取服务器的响应文本 2.3 常用方法 1. open() 初始化请求
参1 method 请求类型 GET/POST/HEAD
参2 url 请求主体
参3 是否同/异步: true(默认异步) / false(同步)
参4,5 认证的帐号和密码
2. send() 正式发送请求
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
2.4 事件句柄 onreadystatechange readyState 的值一变化就触发
3. Ajax+php 请求流程
创建对象 xml请求对象
初始化请求
发送请求
接收 并 处理响应
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <h2 id="box"></h2> <script> // 创建 XHR 对象 var xhr = new XMLHttpRequest(); // console.dir(xhr); // 捕获响应结果,绑定事件 xhr.onreadystatechange = function(){ // console.log(xhr.readyState); if (xhr.readyState == 4) { if (xhr.status == 200) { // 处理结果 // alert(xhr.responseText); box.innerHTML = xhr.responseText; } } } // 请求初始化 // 参1 method 请求类型 GET/POST/HEAD // 参2 url 请求主体 // 参3 是否同/异步: true(默认异步) / false(同步) // 参4,5 认证的帐号和密码 xhr.open('get', './php/1.php', true); // 正式发送请求 xhr.send(); </script>
4. 处理json数据
PHP: json_encode()
JS : eval() 或 JSON.parse()
5. 同步和异步 open()方法的参3 决定了是否同异步
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <h1>AJAX 同异步</h1> <button onclick="loadHtml(true)">异步</button> <button onclick="loadHtml(false)">同步</button> <hr> <script> function loadHtml(b){ var msg = '我是来自于JS的值'; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4) { if (xhr.status == 200) { msg = xhr.responseText; console.log(msg); } } } xhr.open('get', './php/6.php', b); xhr.send(); alert(msg); } </script>
6. post 和 get
7. Ajax 无法跨域 与 jsonp
Ajax 无法跨域
为什么产生这个问题? (产生跨域的原因:)
PS. 新建浏览器图标, [属性]–[目标] 新增以下: 关闭安全验证
1 2 PS. 九种跨域方式实现原理（完整版） `https://segmentfault.com/a/1190000018017118`
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <h1>JSONP</h1> <button onclick="loadHtml()">加载</button> <hr> <div id="box"></div> <script> function makedata(obj){ // alert(obj); box.innerHTML = ''; // JSON.parse() // NO for (var i in obj) { box.innerHTML += i + ' : ' + obj[i] + '<br>'; } } // JSONP 关键步骤 function loadHtml(){ // 创建JS对象 var js = document.createElement('script'); // 设置JS标签的src值 js.src = 'http://127.0.0.1/s86/JS13/php/7.php'; // 添加这个JS对象到页面之中 document.body.appendChild(js); } /* function loadHtml(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4) { if (xhr.status == 200) { box.innerHTML = ''; var obj = JSON.parse(xhr.responseText); for (var i in obj) { box.innerHTML += i + ' : ' + obj[i] + '<br>'; } } } } xhr.open('get', 'http://127.0.0.1/s86/JS13/php/7.php', true); xhr.send(); }*/ </script> <!-- <script> // JS OBJ makedata({"id":"7","name":"\u5929\u4f7f","sex":"0","age":"30","province":"\u6c5f\u82cf"}) </script> --> </body>
8. 封装Ajax 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <h1>AJAX封装</h1> <hr> <button onclick="ajax('./php/8.php',fun1)">封装</button> <div id="box"></div> <script> function ajax(url,fun1){ var xhr = new XMLHttpRequest(); xhr.open('get',url,true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState==4) { if (xhr.status==200) { res = xhr.responseText; fun1(res); } } } } function fun1(y){ box.innerHTML=y; } </script>
PS:状态码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 HTTP 状态 1xx: 信息 消息: 描述: 100 Continue 服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。 101 Switching Protocols 服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。 2xx: 成功 消息: 描述: 200 OK 请求成功（其后是对GET和POST请求的应答文档。） 201 Created 请求被创建完成，同时新的资源被创建。 202 Accepted 供处理的请求已被接受，但是处理未完成。 203 Non-authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。 204 No Content 没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。 205 Reset Content 没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。 206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它。 3xx: 重定向 消息: 描述: 300 Multiple Choices 多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。 301 Moved Permanently 所请求的页面已经转移至新的url。 302 Found 所请求的页面已经临时转移至新的url。 303 See Other 所请求的页面可在别的url下被找到。 304 Not Modified 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取。 306 Unused 此代码被用于前一版本。目前已不再使用，但是代码依然被保留。 307 Temporary Redirect 被请求的页面已经临时移至新的url。 4xx: 客户端错误 消息: 描述: 400 Bad Request 服务器未能理解请求。 401 Unauthorized 被请求的页面需要用户名和密码。 402 Payment Required 此代码尚无法使用。 403 Forbidden 对被请求页面的访问被禁止。 404 Not Found 服务器无法找到被请求的页面。 405 Method Not Allowed 请求中指定的方法不被允许。 406 Not Acceptable 服务器生成的响应无法被客户端所接受。 407 Proxy Authentication Required 用户必须首先使用代理服务器进行验证，这样请求才会被处理。 408 Request Timeout 请求超出了服务器的等待时间。 409 Conflict 由于冲突，请求无法被完成。 410 Gone 被请求的页面不可用。 411 Length Required "Content-Length" 未被定义。如果无此内容，服务器不会接受请求。 412 Precondition Failed 请求中的前提条件被服务器评估为失败。 413 Request Entity Too Large 由于所请求的实体的太大，服务器不会接受请求。 414 Request-url Too Long 由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。 415 Unsupported Media Type 由于媒介类型不被支持，服务器不会接受请求。 416 服务器不能满足客户在请求中指定的Range头。 417 Expectation Failed 5xx: 服务器错误 消息: 描述: 500 Internal Server Error 请求未完成。服务器遇到不可预知的情况。 501 Not Implemented 请求未完成。服务器不支持所请求的功能。 502 Bad Gateway 请求未完成。服务器从上游服务器收到一个无效的响应。 503 Service Unavailable 请求未完成。服务器临时过载或当机。 宕机 504 Gateway Timeout 网关超时。 505 HTTP Version Not Supported 服务器不支持请求中指明的HTTP协议版本。