ajax异步无刷新基础

ajax的应用是非常多的，要实现数据前后端的交互，ajax是一个非常常用的技术哦，加油！
同步和异步
同步：必须等待前面的任务完成，才能继续后面的任务；
异步：不受当前任务的影响。 简单点说，当你去银行办业务，需要一个一个等叫号，轮到你才能你去办理，这就是同步；但是在你等叫号的过程中，你可以玩手机，这就是异步，不影响你的等候叫号。
异步更新网站
当我们访问一个普通的网站时，当浏览器加载完：HTML,CSS,JS以后网站的内容就固定了。如果网站内容发生更改必须刷新页面才能够看到更新的内容。而异步更新就是：我们在访问新浪微博时，当你看到一大半了，会自动帮我们加载更多的微博，同时页面并没有刷新，这就是ajax要实现的一个功能了。
Ajax基础
ajax概念与应用
Asynchronous Javascript And XML（异步JavaScript和XML），ajax并不是凭空出现的新技术，而是对于现有技术的结合：核心是js对象XMLHttpRequest.
ajax使用的依旧是HTTP请求。
一个完整的HTTP请求步骤：
请求的网址，方法get/post
提交请求内容数据，请求主体等
接收响应回来的内容
ajax使用
我们经常说的ajax五步使用法：
建立XMLHTTPRequest对象
使用open方法设置和服务器端交互的基本信息（设置提交的网址，数据，post提交的一些额外内容）
设置发送的数据，开始和服务器端交互（发送数据）
注册回调函数
更新界面（在注册的回调函数中，获取返回的数据，更新界面）
首先写一个get请求代码尝试一下
// 1创建异步对象
var ajaxObj = new XMLHttpRequest（）；
// 2设置请求的url以及请求的方法
ajaxObj.open（'get','get.php'）；
// 3发送请求 发送请求
ajaxObj.send（）；
// 4注册回调事件（函数） 注册，设置的时候 不会被触发，只有在满足某些条件的时候才会被触发，类似的有点击事件，onload事件
// 状态改变事件
ajaxObj.onreadystatechange = function （） {
    // 5接收服务端返回的数据 并且使用（弹框，修改页面显示等等）
    // 响应的数据
    // console.log（ajaxObj.readyState）；
    /*
        判断1:数据回来了
        判断2:当前请求的页面是存在的 交互成功
    */
    if （ajaxObj.readyState ==4&&ajaxObj.status==200） {
        console.log（ajaxObj.responseText）；
    }
}
写一个post代码尝试一下
// 异步对象
var xhr = new XMLHttpRequest（）；
// 设置属性
xhr.open（'post', 'post.php' ）；
// 如果想要使用post提交数据，必须添加
xhr.setRequestHeader（"Content-type","application/x-www-form-urlencoded"）；
// 将数据通过send方法传递
xhr.send（'name=fox&age=18'）；
// 发送并接受返回值
xhr.onreadystatechange = function （） {
// 判断服务器是否正确响应
if （xhr.readyState == 4 && xhr.status == 200） {
       alert（xhr.responseText）；
     } 

};

<div class="box-aw">
            <a href="http://www.ytqczz.com/" target='_blank'

烟台汽车站
                           </a>

</div>