ajax方式

### 同步和异步

同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务

异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。


编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

### ajax的概念

##### 什么是ajax

 1  Ajax: asynchronous  javascript  and  xml (异步js和xml)

 2  是可以与服务器进行(异步/同步)交互的技术之一。

ajax的语言载体是javascript。 最大特点：页面不刷新

#####   ajax出现的历史

  1999年，微软公司发布IE5浏览器的时候嵌入的一种技术。起初名字是XMLHttp

直到2005年，google公司发布了一个邮箱产品gmail，内部有使用ajax技术，该事情引起人们对ajax的注意，也使得一蹶不振的javascript语言从此被人们重视起来

### ajax的使用

#### XMLHttpRequest对象
浏览器内建对象，用于与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步的，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。

**ajax的运行**

<font color="red">一定要打开phpsudy,js文件与php文件在同一主机下,才能请求成功.</font>

#### GET请求的创建

#####   **请求的创建与发送**

   主流浏览器(火狐、google、苹果safari、opera,包括IE8以上的版本)的创建方式,也是现在主要使用的.

//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//2. 设置请求的类型,以及地址
// 第一个参数:请求方式  get/post
// 第二个参数:请求的地址 需要在url后面拼上参数列表
// 第三个参数：默认是异步
xhr.open("get", "01.php?name=Jepson"，异步/同步);

//3.发送请求到服务器
xhr.send(null);


<button>发送</button>
    <script>
        document.querySelector('button').addEventListener('click', ()=>{
   
            //创建一个ajax对象 
            /*
                XML 数据格式
                http 超文本传输协议
                Request 请求
                ajax技术其实是几个技术的组合和应用，并不是什么新的技术
            */
            let xhr = new XMLHttpRequest()
            //请求参数
            /*
                参数1表示请求方式 get或者post
                参数2表示地址，后端接口
                参数3表示同步或者异步，true异步  false同步 默认不写，就是异步
            */
            xhr.open('get', 'data/hello.php')
            //发送请求
            xhr.send()
            //监听请求状态
            xhr.onreadystatechange = ()=>{
   
                // console.log(xhr.responseText)
            }
        }, false)

get方式
<button>发送</button>
    <span></span>
    <script>
        let msg = document.querySelector('span')
        document.querySelector('button').addEventListener('click', () => {
   
            //创建一个ajax对象 
            /*
                xhrObj.readyState - 返回当前请求的状态
                xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
                xhr.readyState = 1时-初始化,对象建立未调用send(