ajax简单使用以及浅析

最新推荐文章于 2023-04-06 22:35:49 发布

原创最新推荐文章于 2023-04-06 22:35:49 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AJAX

AJAX 专栏收录该内容

4 篇文章

订阅专栏

可参考大佬文章：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000

最简单的ajax例子：

get.html:
  1 <html>
  2 <head>
  3 <script type="text/javascript">
  4 //alert('aa');
  5 function btn_click(){
  6         //创建XMLHttpRequest对象
  7         var xhr = new XMLHttpRequest();
  8         //获取值
  9         var name = document.getElementById("name").value;
 10         var age = document.getElementById("age").value;
 11         console.log(name+''+age);
 12         //配置XMLHttpRequest对象
 13         xhr.open("get","get.php?name="+name+"&age="+age,true);
 14         //设置回调函数
 15         xhr.onreadystatechange = function(){
 16         if(xhr.readyState == 4 && xhr.status == 200){
 17         document.getElementById("result").innerHTML = xhr.responseText;
 18 }
 19 }
 20         //发送请求
 21         xhr.send(null);
 22
 23 }
 24
 25 </script>
 26 </head>
 27 <body>
 28  <label for="name">
 29         姓名：
 30  </label>
 31  <input type="text" id="name" />
 32  <br />
 33  <label for="age">
 34         年龄：
 35  </label>
 36  <input type="test" id="age" />
 37  <br />
 38  <input type="button" value="GET" id="btn" onclick="btn_click();" />
 39  <div id="result">
 40  </div>
 41
 42
 43 </body>
 44 </html>

get.php：
  1 <?php
  2 $name = $_GET['name'];
  3 $age =$_GET['age'];
  4 echo 'your name:',$name,'your gender',$age;

浅析AJAX

1、Ajax别名：

无刷新技术:

调用ajax程序的页面,从地址栏上看,没有变化,没有刷新,因此,无刷新技术

局部刷新技术:

调用ajax程序的页面,可能通过响应内容,动态的改变部分DOM节点

异步刷新技术:

Js会阻塞后面的js代码执行和html代码的渲染.
而用异步传输数据,不会阻塞后面js代码执行和html代码的渲染.

同步:

就像打电话,电话不挂,人也不干其他的,等到挂电话后才能干其他的.

异步:

就像发短信,发完短信后,可以干其他的事情,同时等着短信回来.

2、XMLHttpRequest的详细属性
responseText: 服务器响应的主体信息,body信息.
responseXML: 对于大量的格式化文档,可以用XML来传输或交换,由后台程序把数据封装在XML文档时, js接收XML对象并解析该内容.
status: 是服务器的返回状态码,例:200,成功, 403 forbidden 禁止, 404 not found未找到
50X系列,内部服务器错误
statusText: 服务器返回的状态码,对应的文字描述
readyState: XMLHttpRequest对象自身的状态码,0,4 [0,1,4], [2,3,4]
onreadystatechange : 事件属性,绑定当XMLHttpRequest对象的状态发生变化的时候,激发的函数

3、XMLHttpRequest的详细方法
open(‘请求方式’,url, 同步/异步); false->同步, true->异步
send(null/参数), 参数的写法:k1=v1&k2=v2&kn=vn…..
setRequestHeader(key,value); 设置请求的头信息
Abort: 忽略,不要再进行下去了,到此为止
getResponseHeader: 获取响应的某个头信息
getAllResponseHeaders: 获取响应的所有头信息

4、关于兼容：

function xhr(){
    var xxx = null;
    if(window.XMLHttpRequest){
    xxx = new XMLHttpRequest();
}else{
    xxx = new ActiveXObject('Microsoft.XMLHTTP');
}
    return xxx;
}