ajax的基本概念及使用

1.概念：（1）同步：必须等待前面的任务完成,才能继续后面的任务（学生排队打饭，排到你，才能打上饭）

            （2）异步：不受当前任务的影响（在排队打饭过程中，玩手机不受排队的影响）
2.（1）同步更新：我们浏览一个网站，当这个网站页面发生更改时，你必须通过刷新才能看到更改的内容，刷新相当于页面重新加载一次，会感觉很慢，体验不好。
  （2）异步更新：实际情况是，我们在访问新浪微博时,当你看到一大半了,会自动帮我们加载更多的微博,同时页面并没有刷新。
3.ajax作用：在浏览器中,我们也能够不刷新页面,通过ajax的方式去获取一些新的内容,类似网页有微博,朋友圈,邮箱等
4.单词解释:Asynchronous Javascript And XML（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结
合:核心是js对象XMLHttpRequest。
5.ajax使用的是HTTP请求，使用ajax请求需要5步：
        （1）建立XMLHTTPRequest对象
        （2）注册回调函数（当服务器回应我们了,我们想要执行什么逻辑）
        （3）使用open方法设置和服务器端交互的基本信息（设置提交的网址,数据,post提交的一些额外内容）
        （4）发送数据（设置发送的数据，开始和服务器端交互）

        （5）更新界面（在注册的回调函数中,获取返回的数据,更新界面）
6.实例1（get请求）：
<h1>发送get请求的ajax_基础语法</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>

<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步
// 1.创建异步对象
var ajaxObj = new XMLHttpRequest();
// 2.设置请求的url等参数
// 参数1 请求的方法 参数2 请求的url
ajaxObj.open('get','02.ajax.php');
// 3.发送请求
ajaxObj.send();
// 假设 有一个 接返回数据的 方法ajaxObj.get();
// 4.注册事件
// onreadystatechange  状态改变就会调用
// 如果要在 数据完美请求回来的时候 才调用 我们需要手动的 写一些判断的逻辑
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整回来,我们一般会判断 两个值
if (ajaxObj.readyState==4&&ajaxObj.status==200) {
// 如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据完美的回来了');

// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);

// 修改页面的显示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}

}

}
</script>

02.ajax.php页面端代码如下：
<?php
echo 'food good eat more ';
?>7.实例2：
<h1>使用get发送数据到服务器</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>

<script type="text/javascript">
// 绑定点击事件
document.que
4000
rySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步

// 1.创建异步对象
var ajaxObj = new XMLHttpRequest();

// 2.设置请求的url等参数
// 参数1：请求的方法，参数2：请求的url
// get提交的数据，是直接追加在url的后面 格式是xxx.php?pass=123
// 这只是一个字符串拼接  动态的传递参数
// '03.get_senddata.php?userName='+document.querySelector('input').value;
ajaxObj.open('get','03.get_senddata.php?userName=jack');

// 3.发送请求
ajaxObj.send();

// 假设 有一个 接返回数据的 方法ajaxObj.get();

// 4.注册事件
// onreadystatechange  状态改变就会调用
// 如果要在 数据完美请求回来的时候 才调用 我们需要手动的 写一些判断的逻辑
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整回来,我们一般会判断 两个值
if (ajaxObj.readyState==4&&ajaxObj.status==200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据完美的回来了');

// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);

// 修改页面的显示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}

}
}
</script>

03.get_senddata.php端代码如下：
<?php
echo $_GET['userName'];
?>实例3（post请求）：
<h1>ajax 发送post</h1>
<input type="text" value="" placeholder="请输入你爱吃的菜" id='foodText'>
<input type="button" value="ajaxPost请求" id='btnAjax'>

<script type="text/javascript">
document.querySelector("#btnAjax").onclick = function () {
var ajax = new XMLHttpRequest();

// 使用post请求
ajax.open('post','ajax_post.php');

// 如果 使用post发送数据 必须 设置 如下内容
// 修改了 发送给 服务器的 请求报文的 内容
// 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发送
// post请求 发送的数据 写在 send方法中
// 格式 name=jack&age=18 字符串的格式
ajax.send('name=jack&age=998');

// 注册事件
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200) {
console.log(ajax.responseText);
}
}
}
</script>

ajax_post.php端代码如下：
<?php
// 获取 post的数据
echo '你'.$_POST['age'].'岁了';
?>