初学者学Ajax很难

学习目标：

掌握ajax的基本概念

区别Ajax请求和传统请求的区别

基本状态码的含义

• 一周掌握 Ajax基础知识

---

简单来说Ajax就是以下内容：（so easy)

Ajax：前 端html页面中可通过ajax请求后台服务器接口，拿到后台数据，渲染页面

Ajax的优势是：就可以解决同步问题，因为ajax是异步的。

ajax还可以实现页面的局部更新

传统方式请求和Ajax请求的区别

传统方式是使用浏览器地址栏输入网址发送请求，并且每次都会更新当前页面的所有内容，造成资源浪费

 

Ajax 相当于浏览器发送请求与接收响应的代理人，实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验

 

1.4 应用场景：局部更新内容都可以使用ajax进行处理。（表单验证，数据分析显示）

1. 搭建 Java 开发环境
2. 掌握 Java 基本语法
3. 掌握条件语句
4. 掌握循环语句

---

状态码：（由数字1XX,2XX三位数 字组成)

常见状态码：200，304，404，500

例如：

• 1XX系列：指定客户端应相应的某些动作，代表请求已被接受，需要继续处理。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。
• 2XX系列：代表请求已成功被服务器接收、理解、并接受。这系列中最常见的有200状态码。
• 3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。这系列中最常见的有301、302状态码。
• 4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。常见有：401、404状态码。

• 5XX系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。常见有500、503状态码。

---

学习产出：/ajax请求后台接口

 // 1.创建ajax对象
            let ajax = new XMLHttpRequest();

            // 2.配置请求信息
            ajax.open('get','http://localhost:3000/index');

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

            // 4.等待响应，响应完成后接收响应结果
            ajax.onreadystatechange  = function(){

                // 如果已经响应完成，并且响应的结果是成功的，接收响应的成功结果
                // readState值为4表示后台已经处理完并响应了
                if(ajax.readyState == 4 && ajax.status == 200){
                    console.log(ajax.responseText); // 接收后台响应结果，字符串格式
                    let data = JSON.parse(ajax.responseText); // 转对象
                    span.innerHTML = data.msg //渲染页面
                }
            }

• get 传参 ：get传参只需要在url地址后按照?key=value格式进行传递

      // 1.创建ajax对象
        let ajax = new XMLHttpRequest();
        // 2.配置请求信息

        // get方式传参  url？参数=值 & 参数=值
        ajax.open('get','/index?username=小花&age=18');


        // 3.发请求
        ajax.send();

        // 4.监听结果，获取返回的成功结果
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 4 && ajax.status == 200){
                console.log(ajax.responseText);
            }
        }

后台：接参 req.query

const express = require('express');
const app = express();
app.listen(3000,()=>{console.log('服务器已开启')});​
const path = require('path');​
app.get('/',(req,res)=>{    res.sendFile(path.join(__dirname,'3.前端.html'))})​app.get('/index',(req,res)=>{    res.send({code:200,msg:'ok',data:req.query})})

• post传参：使用setRequestHeader设置响应头，并传递对应的post参数
• 语法一

  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
  xhr.send('username=ujiuye&password=123456');

• 语法二

  xhr.setRequestHeader('Content-Type', 'application/json') 
  let data = {username:'ujiuye',password:'123456'}
  xhr.send(JSON.stringify(data))