Ajax基础入门

1.什么是Ajax技术？

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的独立的 Web 应用程序的技术。

通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新。

2.为什么要采用Ajax技术（优缺点）

使用Ajax的最大优点，就是能在不更新整个页面的前提下和服务器进行数据交互。这使得Web应用程序更为迅捷地回应用户动作。

优点：
1.减轻服务器负担，按需要获得数据。
2.无刷新更新页面，进行少量数据交互。
缺点:
1.对搜索引擎支持不好,因为数据是动态加载,搜索引擎爬取不到数据

3.Ajax的原理

Ajax的原理简单来说通过浏览器的javascript对象XmlHttpRequest(Ajax引擎)对象来向服务器发异步请求并接收服务器的响应数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。即用户的请求间接通过Ajax引擎发出而不是通过浏览器直接发出,同时Ajax引擎也接收服务器返回响应的数据,所以不会导致浏览器上的页面全部刷新.什么意思呢？看下图：

4.原生Ajax

4.1创建ajax对象（语法）

let  xhr=new XMLHttpRequest()

(xhr是变量名，随意取，但一般是xhr)

5.原生Ajax实现get方式

5.1分为四步走

1. 创建ajax对象
2. 设置发送方式和请求地址(使用open方法)

   let  xhr=new XMLHttpRequest()
   console.log(xhr)

3. 发送请求（使用send方法 同上）
4. 监听状态码和响应码（只有当readyState=4&&status=200时才是请求成功，且响应就绪。onreadystatechange属性是一个方法,当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法.
   readyState 状态码
   0: 请求未初始化
   1: 服务器连接已建立
   2: 请求已接收
   3: 请求处理中
   #4: 请求已完成，且响应已就绪
   == http状态码（响应码）==
   1 消息
   2 成功（200就是成功）
   3 重定向
   4 请求错误（404 No Found）
   5 服务器错误
   自己可以去搜来看看

5.2代码实例

// 1. 创建ajax对象
 let  xhr=new XMLHttpRequest();
//2. 设置发送方式和请求地址
xhr.open('get/GET','请求地址?键名=值&键名=值');//这里是原生写法，后期封装不这样传参
//3.发送请求
xhr.send();
//4.监听状态码和响应码
xhr.onseadystatechange=function(){
       //ajax状态码等于4 且 http状态码等于200,表示请求成功
      if(xhr.readState==4 && xhr.status==200){
                //获取响应的数据
                var data=xhr.response;
                //各种渲染操作 
}

6原生Ajax实现post方式

原生Ajax实现post方式，步骤和get方式几乎一样，不同之处是post方式多了一步，即设置请求头

// 1. 创建ajax对象
var xhr = new XMLHttpRequest()

// 2. 配置请求方式和请求地址
xhr.open('post', '服务器地址url')
// 3. 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 4. 发送请求
xhr.send('参数名1=参数值1&参数名2=参数值2')

// 5. 监听状态变化 & 接收数据
xhr.onreadystatechange = function () {
// 如果ajax状态等于4 且 http状态码等于200
if (xhr.readyState === 4 && xhr.status === 200) {
// 接收数据
var data = JSON.parse(xhr.response) // 后端响应的数据是字符串 需要转为对象
console.log( data)
}
}

由此可见，还有比较重要的一点是传参方式不一样

//get方式传参在请求的地址后面（后续封装后以对象方式传参）
xhr.open('请求方式', '服务器地址url?参数名1=参数值1&参数名2=参数值2')

//post方式在send里传（后续封装后以对象方式传参）
xhr.send('参数名1=参数值1&参数名2=参数值2')

关于后期Ajax原生封装，会单独抽出来写