js中的ajax

ajax全名就是 “asynchronous javascript and xml” 他到底是什么？

怎么获取数据

• 学习表单之后我们知道，如果想把数据提交到服务器，或者是从服务器取出数据，我们都是通过表单的提交操作，而我们获取数据的方式呢，就是依靠页面的全部的刷新来实现的

• ajax不用这么麻烦，因为每次刷新页面，是很麻烦的，ajax模式是通过xmlhttprequest对象来实现和服务器之间的信息的交互的。

环境的搭建

• 由于讲解的ajax方法需要与web服务器进行交互，所以呢，我们需要下载一个工具包。包含Apache MySQL PHP PHPmyadmin 等，类似的环境有很多种，大家可以根据个人喜好来安装。

第一个例子。看看js的ajax操作

• 表单页面的编写

  <input type="button" value="提交"       onclick="ff()">
  <div id="res"></div>
  

  1）首先。完成 ff 函数 ，当点击按钮的时候，实现对应的操作

  function ff(){
  
  }
  

  2）声明一个空对象来存放XMLHttpRequest对象 
  var xmlHttpReq=null ;

  3）给XMLHttpRequest对象赋值

  if (window.ActiveXObjet) {
      xmlHttpReq = new Active XObjet("Microsoft.XMLHTTP")
  } else
  if (window.xmlHttpRequest) {
      xmlHttpReq = new xmlHttpRequest();
  }
  

  4）实例化完成之后，使用open() 方法初始化 
  XMLHttpRequest 对象 
  xmlHttpReq.open(“GET”,”test.php”,true)

  //调用open方法并且采取的是异步的操作

  5）因为要做一个异步的调用，所以呢，需要注册一个XMLHttpRequest对象，将调用的回调时间处理器，当他的onreadystastechange 属性改变的时候，就会激发一个readystatechange 事件

  xmlHttpReq.onreadystastechange=resCallBack;
  // 设置回调函数

  6）使用send参数来发送请求。

  • 如果请求使用的是 GET 方式。则在发送的时候，就 不需要再指定参数了，或者是指定为 null 参数

  • 如果用到的是 POST 方法，那么就需要在 send 的时候，再指定相应的参数。

    当请求的状态改变的时候，XMLHttpRequest对象会调用onreadystastechange 属性注册的事件处理器，所以，相应该事件之前，会先检查 readystatechange的值和http 的状态。当请求完成加载，也就是readystatechange的值为4 的时候，并且响应成功，也就是http 的状态值为200 的时候，就可以调用js的函数来处理响应的内容了。

    代码如下

    function resCallBack() {
          if (xmlHttpReq.readystate == 4) {
               if (xmlHttpReq.status==200){
                  document.getElementById('res').innerHTML=xmlHttpReq.responseText;
               }
          }
      }

    以上就是ajax技术的全部。他不需要将页面的全部内容都发服务器，而是按照需要，选择性的发送页面当中的一部分的内容 
    使用js启动一个请求并处理相应的返回值，然后使用浏览器的DOM方法来更新页面的内容