ajax讲义

PHP中Ajax交互技术
一、介绍
1.什么是ajax？
Ajax允许浏览器和服务器之间通信并保证无刷新当前的请求页面，ajax最早是在IE中出现，后来得到了多数浏览器的支持，
用于实现异步通信的对象。

360、谷歌、火狐、苹果、IE

IE: ActiveXObject         下载一个ietest  5.5  6  7  8  
主流:XMLHttpRequest

//判断客户端使用的是什么浏览器

2.传统的web同步提交机制(同步)
异步与同步：
同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在响应用户，用户体验不好。(等)

异步，不用等所有操作等做完，就响应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。(不等)

3.ajax的优势
使用ajax可以实现无刷新的更新页面，减少用户心里以及实际的等待时间，当需要读取大量数据的时候，不会像重新加载一样出现白屏的情况，ajax使用XMLHttpRequest对象发送请求并得到服务器的相应，在不刷新载入整体页面的情况，使用JS操作DOM更新页面。
所以在请求的期间，用户看到的是原来的内容，只有当数据接收完毕之后才更新相应部分的内 容，这样的更新是瞬间的，用户几乎感觉不到。
具体的优势：
<1.>带来更好的用户体验。
<2.>可以将一些服务器负担的工作交给客户端，利用客户端闲置的能力来处理，减轻了 服务器和带宽的负担，节约空间和带宽租用成本。
❤️.>可以调用外部数据
<4.>基于标准化并被广泛支持的技术，不需要下载插件或者小程序等
<5.>进一步促进页面呈现和数据分离

二、原生ajax的实现步骤(四部曲)
注意：
因为ajax是基于浏览器中，不同的浏览器内置的对象也不同。
主要分为主流浏览器以及IE6版本以下浏览器。

1.创建ajax对象
–1.判断浏览器及创建ajax对象
var xmlhttp;
if(window.XMLHttpRequest){

			//创建请求对象  IE7+, Firefox, Chrome, Opera, Safari 主流浏览器执行的代码
			xmlhttp = new XMLHttpRequest();
	}else{
		//IE6  IE5浏览器
			xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
	}

2.设置回调函数(监听)
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState ==4 && xmlhttp.status ==200){
//ajax发送成功，返回数据
var str = xmlhttp.responseXML;
}
}

3.请求初始化
参数1：请求方式 get or post
参数2：请求地址 可带参数
参数3：true代表异步 false 代表同步
xmlhttp.open(“GET请求方式”,‘test.php请求地址及参数’,true);

4.发送
xmlhttp.send();

5.请求对象属性
 readyState 请求状态：0,1,2,3,4
 responseText 响应内容
 status 浏览器响应状态：200正常， 404 请求地址不存在 ,304 5*
 statusText 状态内容
 onreadystatechange 回调函数属性

z注意：
	0 未初始化状态：此时，已经创建了一个XMLHttpRequest对象
	1 准备发送状态：此时，已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
	2 已经发送状态：此时，已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应
	3 正在接收状态：此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到
	4 完成响应状态：此时，已经完成了HTTP响应的接收

6.方法
 open() 初始化 HTTP 请求参数
 send() 发送 HTTP 请求，使用传递给 open() 方法的参数
 setRequestHeader() 向一个打开但未发送的请求设置或添加一个 HTTP 请求

7.post请求方式
xmlhttp.open(“POST”,“文件地址”,true);
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=Gates”);

课堂代码

  <input type="text" id="text1"/>
  <button onclick="createajax()">点击</button>
  <script>
    function createajax(){
      var num = document.getElementById("text1").value;
      //第一步：判断客户端是哪种对象
      var xhrhttp = null;
      if(window.XMLHttpRequest){
           xhrhttp = new XMLHttpRequest();
      }else{
           xhrhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      var poststr = "a="+num+"&b=2";
      //第二步：打开请求   true 异步 默认值  false  同步
      xhrhttp.open("post","user/add/",true);
      //如果请求方式为post才去加
      xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
      //xhrhttp.send(null);
      xhrhttp.send(poststr);

      //第四步：ajax将服务端结果接受传回给客户端
      xhrhttp.onreadystatechange = function(){
          if(xhrhttp.readystate==4 && xhrhttp.status == 200){
              console.log(xhrhttp.responseText);
          }
      }

      //alert(xhrhttp);

      // 同步提交  异步提交
      /*
          同步：在同一个时间点就只能干一件事，这件事干完了才能得到结果
          异步：在同一个时间点干很多事，其中一件事干完了就交代结果 在去干另一件事
      */
    }
    

      



  </script>