| 使用Ajax发送http请求（get&post请求） | 您所在的位置：网站首页 › ajax请求状态为200但是没有接收到返回数据是为什么 › 使用Ajax发送http请求（get&post请求） |
使用Ajax发送http请求（get&post请求）
|
同步和异步
同步和异步的概念
同步：必须等待前面的任务完成，才能继续后面的任务。 异步：不受当前任务的影响。 拿排队举例： 同步：在银行排队时，只有等到你了，才能够去处理业务。 异步：在排队的时候，可以玩手机。 异步更新网站我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。 可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。 试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。 web前端里的异步更新，就要用到 Ajax。 Ajax Ajax 的概念在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式去获取一些新的内容。 Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。 发送 Ajax 请求的五个步骤其实也就是 使用 XMLHttpRequest 对象的五个步骤。 我们先回忆一下，一个完整的HTTP请求需要的是： 请求的网址、请求方法get/post。 提交请求的内容数据、请求主体等。 接收响应回来的内容。 发送 Ajax 请求的五个步骤： （1）创建异步对象。即 XMLHttpRequest 对象。 （2）设置请求的参数。包括：请求的方法、请求的url。 （3）发送请求。 （4）注册事件。 onreadystatechange事件，状态改变时就会调用。 如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。 （5）获取返回的数据。 Ajax 请求：get 请求举例（1）index.html： Document Ajax 发送 get 请求 // 绑定点击事件 document.querySelector('#btnAjax').onclick = function () { // 发送ajax 请求 需要 五步 // （1）创建异步对象 var ajaxObj = new XMLHttpRequest(); // （2）设置请求的参数。包括：请求的方法、请求的url。 ajaxObj.open('get', '02-ajax.php'); // （3）发送请求 ajaxObj.send(); //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。 //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。 ajaxObj.onreadystatechange = function () { // 为了保证 数据 完整返回，我们一般会判断 两个值 if (ajaxObj.readyState == 4 && ajaxObj.status == 200) { // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的 // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示 console.log('数据返回成功'); // 数据是保存在 异步对象的 属性中 console.log(ajaxObj.responseText); // 修改页面的显示 document.querySelector('h1').innerHTML = ajaxObj.responseText; } } }（2）02-ajax.php： 效果如下：
index.html： Document Ajax 发送 get 请求 // 异步对象 var xhr = new XMLHttpRequest(); // 设置属性 xhr.open('post', '02.post.php'); // 如果想要使用post提交数据,必须添加此行 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 将数据通过send方法传递 xhr.send('name=fox&age=18'); // 发送并接受返回值 xhr.onreadystatechange = function () { // 这步为判断服务器是否正确响应 if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } }; XMLHttpRequest 对象详解我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段，我们讲一下注意事项。 发送请求发送请求的方法： open(method, url, async);参数解释： method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） 另外还有个方法：（仅用于 POST 请求） send(string); POST请求时注意如果想让 像form 表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据： xmlhttp.open("POST","ajax_test.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("name=smyhvae&age=27"); onreadystatechange 事件注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。 readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化） 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status： 200: "OK"。 404: 未找到页面。 在 onreadystatechange 事件中，当 readyState 等于 4，且状态码为200时，表示响应已就绪。 服务器响应的内容responseText：获得字符串形式的响应数据。 responseXML：获得 XML 形式的响应数据。 如果响应的是普通字符串，就使用responseText；如果响应的是XML，使用responseXML。 Ajax 传输 XML XML 语法XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：#。 1、XML声明： 第一行的声明，指定了XML版本(1.0)以及使用的编码。 2、自定义标签： XML中没有默认的标签，所有的标签都是我们自己已定义的。例如： XML中没有单标签，都是双标签。 3、根节点： XML中必须要有一个根节点，所有的子节点都放置在根节点下。例如： XML 解析因为 XML 就是标签，所以我们可以直接用解析Dom元素的方法解析 XML。 解析过程： （1）html 部分：（包含 xml ） Document fox 18 小花花（2）解析 xml： var xmlObj = document.getElementById("personXML"); var name = xmlObj.getElementsByTagName('name')[0].innerHTML; console.log(name); ajax 请求解析xml（举例）（1）get_xml.php：（里面包含了xml文件） 上方代码解释： php 自带了 读取 xml 文件的方法。 在 php 中，如果要使用xml传输数据，则需要使用header()设置返回的内容为xml。 （2）get_xml.html：（Ajax 请求，获取并解析xml） Document document.querySelector('#getXML').onclick = function () { var ajax = new XMLHttpRequest(); ajax.open('get','get_XMl.php'); ajax.send(); ajax.onreadystatechange = function () { if (ajax.readyState == 4 && ajax.status==200) { // 如果 返回的是 xml文件 console.log(ajax.responseText); // 异步 对象中 有另外一个属性 用来专门获取 xml // xml对象 在浏览器段 就是一个 document对象 // 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法 console.log(ajax.responseXML); console.log(ajax.responseXML.querySelector('kuzi').innerHTML); // 下面这个 页面文档对象 如果要获取某个标签 console.log(window.document); } } } Ajax 传输 JSON JSON 的语法JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。 语法规则： 数据在键值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 数据类型： 数字（整数或浮点数） 字符串（在双引号中） 逻辑值（true 或 false） 数组（在方括号中） 对象（在花括号中） null 示例： // 对象 { "name":"fox", "age":"18", "sex":"true", "car":null } // 数组 [ { "name":"小小胡", "age":"1" }, { "name":"小二胡", "age":"2" } ] JavaScript中：json 字符串 js 对象基本上，所有的语言都有将 json 字符串转化为该语言对象的语法。 比如在 js中： JSON.parse()：将JSON字符串转化为 js 对象。例如： // 将 JSON 字符串格式化为 js 对象 var jsObj = JSON.parse(ajax.responseText); JSON.stringify()：将 JS 对象转化为JSON字符串。例如： var Obj = { name: "fox", age: 18, skill: "撩妹" }; console.log(Obj); // 将 js 对象格式化为 JSON 字符串 var jsonStr = JSON.stringify(Obj); PHP中：json 字符串 js 对象json_decode()方法：将json字符串转化为变量。 json_encode()方法：将变量转化为json字符串。 代码举例： 输出结果： stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 ) {"name":"littleFox","age":13} ajax 请求解析 json（举例）（1）Person.json: { "name":"小强", "skill":"砍树", "friend":"老板" }（2）myJson.php： （3）getJson.html： Document 获取 json 数据 // 获取的是一个 如果要获取多个 // document.querySelectorAll(selector) document.querySelector("#btnJson").onclick = function () { var ajax = new XMLHttpRequest(); ajax.open('get','myJson.php'); ajax.send(); ajax.onreadystatechange = function () { if (ajax.readyState==4&&ajax.status==200) { // json 字符串 是字符串 所以我们可以 通过 responseText获取 console.log(ajax.responseText); // 转化为 js对象 var jsObj = JSON.parse(ajax.responseText); console.log(jsObj); // 拼接ul s var str = ''; str+=''; str+=''+jsObj.name+''; str+=''+jsObj.skill+''; str+=''+jsObj.friend+''; str+=''; // 设置到界面上 document.body.innerHTML = str; } } }演示效果：
附加解释-- get 和 post 方法： Form 中的 get 和 post 方法，在数据传输过程中分别对应了 HTTP 协议中的 GET 和 POST 方法。二者主要区别如下： 1、Get 是用来从服务器上获得数据，而 Post 是用来向服务器上传递数据。 2、Get 将表单中数据的按照 variable=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post 是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向 URL。 3、Get 是不安全的，因为在传输过程，数据被放在请求的 URL 中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post 的所有操作对用户来说都是不可见的。 4、Get 传输的数据量小，这主要是因为受 URL 长度限制；而 Post 可以传输大量的数据，所以在上传文件只能使用 Post（当然还有一个原因，将在后面的提到）。 5、Get 限制 Form 表单的数据集的值必须为 ASCII 字符；而 Post 支持整个 ISO10646 字符集。 6、Get 是 Form 的默认方法。 使用 Post 传输的数据，可以通过设置编码的方式正确转化中文；而 Get 传输的数据却没有变化。在以后的程序中，我们一定要注意这一点 |
【本文地址】