博学谷iT学习技术支持

什么是Ajax

Ajax就是js这个语言和服务器交互的手段

是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具

是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

优势和缺点

不需要插件的⽀持，原⽣ js 就可以使⽤ ⽤户体验好（不需要刷新⻚⾯就可以更新数据） 减轻服务端和带宽的负担 缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到

Ajax的操作流程

具体操作流程：

首先通过PHP页面将数据库中的数据取出

取出后转成json格式的字符串，后利用ajax把字符串返还给前台

再利用json.parse解析通过循环添加到页面上

那么反之，前端的数据可以利用ajax提交到后台

但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上

最后再由PHP将数据插入到数据库中

实现Ajax的基本步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

1创建XMLHttpRequest对象,即创建一个异步调用对象.

2创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

3设置响应HTTP请求状态变化的函数.

4发送HTTP请求.

5获取异步调用返回的数据.

6使用JavaScript和DOM实现局部刷新.

1.创建XMLHttpRequest对象

var xhr = function createXhr(){
                  if(window.ActiveXObject){ //IE5 IE6
                    	return new window.ActiveXObject("Microsoft.XMLHttp");
                  }else if(window.XMLHttpRequest){  //IE7 以上 及 其他浏览器
                   		return new XMLHttpRequest();
                  }else{
                    	alert("您的浏览器不兼容，换一个");
                    	return null;
                 }
 }

或者用一句话来创建 var xhr = new XMLHttpRequest();

2)向服务器发送数据，open(),一般有两种方法：get()、post()

get():，最常用于向服务器查询某些信息，它适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下。

post:通常用于服务器发送应该被保存的数据。"POST"方法常用于HTML表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求

3回调函数的处理（数据接收的处理）

function processResponse(){};

//或者直接写在里面也可以
xhr.onreadystatechange = function(){};

利用jQuery实现Ajax

  $.ajax({
                   url: "http://www.hzhuti.com",    //请求的url地址
                   dataType: "json",   //返回格式为json
                   async: true, //请求是否异步，默认为异步，这也是ajax重要特性
                   data: {
                   			 "id": "value"
                   		 },    //参数值
                  type: "GET",   //请求方式
                  beforeSend: function() {
                      //请求前的处理
                  },
                  success: function(req) {
                      //请求成功时处理，一般只用到这一个
                  },
                  complete: function() {
                      //请求完成的处理
                  },
                  error: function() {
                      //请求出错处理
                  }
        });

利用jQuery来创建Ajax请求也是目前最常用的一种方式。