企业seo整站优化方案,建设网站大概多少钱,wordpress首页显示vip标识,服务器上怎么做网站浏览器中为我们提供了一个JS对象XMLHttpRequet#xff0c;它可以帮助我们发送HTTP请求#xff0c;并接受服务端的响应。 意味着我们的浏览器不提交#xff0c;通过JS就可以请求服务器。ajax(Asynchronous Javascript And XML)其实就是通过XHR对象#xff0c;执行HTTP请求。… 浏览器中为我们提供了一个JS对象XMLHttpRequet它可以帮助我们发送HTTP请求并接受服务端的响应。 意味着我们的浏览器不提交通过JS就可以请求服务器。ajax(Asynchronous Javascript And XML)其实就是通过XHR对象执行HTTP请求。1、创建XHR对象1 var xhr  new XMLHttpRequest(); //暂不考虑兼容 2、XHR的对象属性和方法1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 方法 open(get/post, url, true/false); //有参数则kvk1v1这种形式 send(null);   属性 //代表请求状态不断变化为4时请求结束 readyState //响应的内容 responseText //响应的状态码200403404 status //状态文字 statusText   事件 //当readyState变化时会触发此事件 onreadystatechange  function() {}; 3、通过XHR对象发送get请求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 !DOCTYPE html html     head         titleajax/title         meta charsetUTF-8         meta nameviewport contentwidthdevice-width, initial-scale1.0     /head     body         div idbox             input typetext namecon value idcon /         /div     /body     script typetext/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 ajax.php如下1 2 3 ?php $con  !empty($_GET[con]) ? trim($_GET[con]) : 没有数据; echo $con; 填入数据当鼠标焦点离开input时触发请求弹出响应内容。4、通过XHR对象发送post请求(1)、open()第1参数为post(2)、POST的参数以kvk1v1k2v2的形式拼接并用send()发送(3)、必须要设置Content-Type为application/x-www-form-urlencoded1 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 !DOCTYPE html html     head         titleajax/title         meta charsetUTF-8         meta nameviewport contentwidthdevice-width, initial-scale1.0     /head     body         div idbox             input typetext namename value idname /             input typepassword namepwd value idpwd /             input typesubmit namesub value提交 idsub /         /div     /body     script typetext/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 ajax.php如下1 2 3 4 ?php $name  !empty($_POST[name]) ? trim($_POST[name]) : 没有数据; $pwd  !empty($_POST[pwd]) ? trim($_POST[pwd]) : 没有数据; echo 用户名, $name, 密码, $pwd; 单击submit后发送post请求弹出响应信息。5、返回值jsonhtmltextxml返回值只有两种text和xml。不过text内容中可以是一段html或json结构的字符串。(1)、返回json格式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 !DOCTYPE html html     head         titleajax/title         meta charsetUTF-8         meta nameviewport contentwidthdevice-width, initial-scale1.0     /head     body         div idbox             select idcity/select             input typebutton value获取 idget /         /div     /body     script typetext/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 ajax.php如下1 2 3 4 5 6 7 ?php $data  array(     array(id  1, name  上海),     array(id  2, name  北京),     array(id  3, name  深圳), ); echo json_encode($data); (2)、返回xml格式xml通过responseXML来读取responseXML不是字符串是DOM对象。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 !DOCTYPE html html     head         titleajax/title         meta charsetUTF-8         meta nameviewport contentwidthdevice-width, initial-scale1.0     /head     body         div idbox             div idnews/div             input typebutton value获取 idget /         /div     /body     script typetext/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 ajax.php如下1 2 3 4 5 6 7 8 9 10 11 ?php header(Content-Type: text/xml;charsetutf-8); $xml  EOD ?xml version1.0 encodingutf-8? news     title111/title     title222/title     title333/title /news EOD; echo $xml; 6、ajax的同步与异步通过设置open()的第三个参数true/false来查看请求的效果。同步请求发送请求-等待结果-操作完成-继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码严格按照步骤一步一步执行。异步请求发送请求-继续后面代码-响应结果接收完毕-操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码也就是说在结果返回之前用户可以操作其他东西。