原生ajax

关于什么是ajax上一篇文章中已简单介绍，在此再次对ajax进行详细介绍，已帮助刚入坑前端的学子了解ajax，揭开ajax的神秘面纱。许多刚接触ajax的朋友会觉得ajax十分神秘、不可思议、难以理解。ajax是啥？能用来做什么？ajax都包含哪些内容？ajax的工作原理是什么？ajax是如何和后端进行交互的？又是怎样接收处理后端返回的数据......其实ajax并不难，或则说ajax本身并不难。个人认为ajax的学习的难度在于：①ajax的原理，不了解原理则会产生以上所说的一些疑问，觉得不可思议。②其次难度在于数据传输的格式：xml/json,想要玩转ajax就必须熟练掌握xml和json两种常用的数据传输格式。③工作中前端和后端是分开的，因此刚学习ajax时难免产生这样的疑问：后端是怎么接收我传送过去的数据，又是怎样给我返回的？...诸如此类的问题。ajax是数据交互的桥梁，链接前后端，所以想要玩转ajax最好能稍微了解一些后端的知识，这样自己练习时也方便。个人推荐php（传说中最好的语言），简单方便。④ajax报错时，不容易排查寻找错误。许多初学者在练习使用时总会出现各种各样奇奇怪怪的报错，手足无措。下面就针对以上所说问题进行简单的解答，希望可以帮助到刚入坑的小伙伴们，文中若有错误还请大神包涵、指教，衷心感谢。

1：什么是ajax?

Ajax不是一门新技术，是旧技术的新应用。Ajax即：异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简单的来说，就是：在不重载网页的情况下与服务器进行数据交互，并将返回的数据进行有效的处理。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面，这对于用户体验十分不好。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等，目前基本上所有网站都在使用ajax技术。

2：ajax可以做什么？为什么要使用ajax？

上面对ajax的定义、介绍其实已经回答了这个问题。ajax的功能就是实现：页面和web服务器之间数据的异步传输。关于异步和同步可以看上一篇文章，其中对异步同步进行了简单介绍。同步：不采用ajax的页面，当用户在页面发起请求时，将会刷新整个页面，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，无法进行其他操作。客户端和服务器传递了许多多余的数据，效率低，等待时间长，用户体验差。异步：采用ajax技术，可以实现页面的局部更新，而不是整个页面的更新，当用户发起请求后，用户还可以进行页面上的其他操作。客户端和服务端间只传递需要的数据，效率高，用户体验性较好。

3：ajax原理，图解ajax：（图引用自百度）

注册实例：下图为一个注册功能的实例图，其功能为通过ajax不刷新页面的情况下检测用户名和密码，为用户进行提示。当用户输入用户名不存在或密码错误时禁止用户发送请求并对用户进行提示。（此处不理解没关系，往下看，等会再返回来）

4：ajax具体步骤：

① 创建异步对象（XMLHttpRequest）。

② 设置请求行（请求行内参数1：请求方式get/post，参数二：设置请求url。注：get方式数据拼接在url中）。

③ 设置请求头（get方式可以省略，post方式无数据时也可省略）。

④ 回调函数，处理从服务器返回的数据。

⑤ 请求体，发送请求，post方式数据放于send()中，get方式或post无数据时为:null。

5：XMLHttpRequest兼容性问题：

XMLHttpRequest是ajax的基础。

XMLHttpRequest 对象：

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6 ，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xhr;
if (window.XMLHttpRequest){
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr=new XMLHttpRequest();
}else{
    // IE6, IE5 浏览器执行代码
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

6：发送get请求（若不清楚get以及post可查看上一篇文章，链接在底部）

html部分代码：

<p>请输入你的姓名：</p>
<input type="text" class="txt" placeholder="姓名："  />
<div class="btnget">get请求</div>
<div class="btnpost">post请求</div>
<div class="shujubg">
    <div class="shuju">
	<p>下面是发送ajax请求后返回的get数据：</p>
	<span></span>
    </div>
    <div class="shujupost">
	<p>下面是发送ajax请求后返回的post数据：</p>
	<span></span>
    </div></div>

js(ajax)部分代码：

//GET方式发送数据:
$(".btnget").click(function(){
    //1：创建异步对象
    var xhr=new XMLHttpRequest();
    //2:设置请求行
    xhr.open('get','./php/data.php?name='+$(".txt").val());
    //3：设置请求头(get可以省略)
    //4:回调函数(onreadystatechange事件)
    xhr.onreadystatechange=function(){
    //4.1：判断ajax返回状态，数据完全返回成功执行函数
    if(xhr.readyState==4&&xhr.status==200){
        $(".shuju>span").html(xhr.responseText);
        $(".shuju>span").css("color","red");
        }
    }
    //5：发送请求
    xhr.send(null);
})

后端php部分代码：（接收通过ajax传送过来的数据，并将之原样返回给前端）

<?php
	//设置中文编码
	header('content-type:text/html;charset=utf-8');
	//通过超全局get获取get方式传送来的数据：
	$name=$_GET['name'];
	echo $name."这是从后端返回的数据啊";
?>

运行效果图：（哼哼是通过ajax的get方式发送给后端，然后后端原样返回，前端接收后显示出来的）

7：发送post请求：

js(ajax)代码：

//POST方式发送数据：
$(".btnpost").click(function(){				
    //1：创建异步对象
    var xhr=new XMLHttpRequest();
    //2:设置请求行
    xhr.open('post','./php/postdata.php');
    //3：设置请求头(get可以省略)
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //4:回调函数(onreadystatechange事件)
    xhr.onreadystatechange=function(){
    //4.1：判断ajax返回状态，数据完全返回成功执行函数
    if(xhr.readyState==4&&xhr.status==200){
            $(".shujupost>span").html(xhr.responseText);
            $(".shujupost>span").css("color","red");
        }
    }
//5：发送请求,get方式或则数据为空时send值为null
var data='name='+$(".txt").val();
xhr.send(data);
})

php部分代码：(功能也是原样返回，前端post方式提交后端则用$_post接收)

<?php
	//设置中文编码
	header('content-type:text/html;charset=utf-8');
	//通过超全局get获取get方式传送来的数据：
	$name=$_POST['name'];
	echo $name."这是从后端返回的数据啊";

?>

注意：psot方式必须设置请求头！！！格式固定。post方式要传送的数据不跟在url后面！数据必须写在send(）内！

ajax（序章）同步与异步：同步与异步（小白必看，大神略过）

初识Ajax(初章)——原生ajax及ajax封装