黑马ajax学习笔记01--搭建node服务器，ajax实现步骤，服务器响应的数据格式，get，post，请求参数格式，json请求方式，错误处理，状态码，同步及异步，ajax封装

1、搭建一个node服务器https://www.cnblogs.com/technicist/p/12730501.html2、ajax的实现步骤1、创建ajax对象var xhr=new XMLHttpRequest()2、告诉ajax请求地址以及请求方式xhr.open('get','http://www.example.com')3、发送请求xhr.send()4、获取服务器端与客户端的响

心湖中的石子

749人浏览 · 2021-02-18 18:02:34

心湖中的石子 · 2021-02-18 18:02:34 发布

1、搭建一个node服务器

https://www.cnblogs.com/technicist/p/12730501.html

2、ajax的实现步骤

1、创建ajax对象

var xhr=new XMLHttpRequest()

2、告诉ajax请求地址以及请求方式

xhr.open('get','http://www.example.com')

3、发送请求

xhr.send()

4、获取服务器端与客户端的响应数据

xhr.onload=function(){
console.log(xhr.responseText);
}

3、ajax的实现案例

1、修改app.js文件，在node中创建路由

//引入express框架
const express=require('express')

//引入路径处理模块
 const path=require('path')

//创建web服务器
const app=express();

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')))

//创建路由，这里自定义路由，设定访问的路径
app.get('/first',(req,res)=>{
  res.send('hello ajax')
})

//监听端口
app.listen(8848);

//控制台提示输出
console.log('服务器启动成功')

2、页面文件中获取responseText向信息

 <script type="text/javascript">
  //1、创建ajax对象
  var xhr=new XMLHttpRequest();
  //2、告诉ajax对象要向哪发送请求，以什么方式发送请求
  //a，请求方式，b，请求地址
  xhr.open('get','http://localhost:8848/first');
  //3、发送请求
  xhr.send();
  //4、获取服务器端响应到客户端的数据
  xhr.onload =()=>{
    //xhr.responseText
    console.log(xhr.responseText)
  }
</script>

4、服务器端响应的数据格式

大多数是以json对象作为相应数据的格式。当客户端拿到响应数据时，要将json数据和html字符串进行拼接，然后将拼接结果展示在页面中。

1、修改app.js文件，在node中创建路由及response返回的内容，这里使用一个对象作为返回值
app.js

 //引入express框架
const express=require('express')

//引入路径处理模块
 const path=require('path')

//创建web服务器
const app=express();

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')))

//创建路由
app.get('/first',(req,res)=>{
  res.send('hello ajax')
})
//----使用对象作为返回值--------
app.get('/responseData',(req,res)=>{
  res.send({ 'name':'zhangsan','age':19,'address':'beijing' })
})
//监听端口
app.listen(8848);

//控制台提示输出
console.log('服务器启动成功')

2、从response获得对象
index.html

<script type="text/javascript">
  //1、创建ajax对象
  var xhr=new XMLHttpRequest();
  //2、告诉ajax对象要向哪发送请求，以什么方式发送请求
  //a，请求方式，b，请求地址
  xhr.open('get','http://localhost:8848/responseData');
  //3、发送请求
  xhr.send();
  //4、获取服务器端响应到客户端的数据
  xhr.onload =()=>{
    //xhr.responseText
    console.log(xhr.responseText)
    //将json字符串转换成json对象的方法为JSON.parse()
    var myjson=JSON.parse(xhr.responseText)
    console.log(myjson)
    var str='<h2>'+myjson.name+'</h2>';
    document.body.innerHTML=str;
  }
</script>

5、ajax的get方式请求参数传递

请求格式

参数使用?key1=value1&key2=value2

  xhr.open('get','http://localhost:8848/first?name=zhangsan&age=23');

案例

1、在node中的app.js配置路由

//引入express框架
const express=require('express')

//引入路径处理模块
 const path=require('path')

//创建web服务器
const app=express();

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')))

//创建路由
app.get('/first',(req,res)=>{
  res.send('hello ajax')
})
app.get('/responseData',(req,res)=>{
  res.send({ 'name':'zhangsan','age':19,'address':'beijing' })
})
app.get('/get',(req,res)=>{
  res.send(req.query)
})
//监听端口
app.listen(8848);

//控制台提示输出
console.log('服务器启动成功')

2、在html中设置访问逻辑

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<p>
  <input type="text" name="" id="uname"/>name
</p>
<p>
  <input type="password" name=""  id="pwd"/>name
</p>
<p>
  <input type="button" value="提交" id="btn"/>
</p>
<script type="text/javascript">
  //获取按钮元素
  var btn=document.getElementById("btn");
  var uname=document.getElementById('uname');
  var pwd=document.getElementById('pwd')
  //获取文本框的值
  btn.onclick = ()=> {
    //1、创建ajax对象
    let xhr = new XMLHttpRequest();
    //2、配置ajax对象
    //2.1拿文本框的值
    var nameValue=uname.value;
    var pwdValue=pwd.value;
    //2.2拼接字符串
    var params='username='+nameValue+'&pwd='+pwdValue
    //2.3配置ajax
    xhr.open('get','http://localhost:8848/get?'+params)
    //3、发送请求
    xhr.send();
    //4、获得反馈
    xhr.onload=()=>{
      console.log(xhr.responseText)
    }
  }

</script>
</body>
</html>

6、ajax的post方式请求参数传递

必须设置请求报文的类型
参数和get一样用key-value，参数见用&分割

请求报文：
在http请求和相应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定要的格式。
在这里插入图片描述
使用node服务器的时候需要注意两点

1、需要引入解析模块

//使用post方式传参必须的模块
const bodyParser= require('body-parser')

2、需要能够解析这个模块的编码器

//解析post请求头，使用post方式传参必须的模块。否则log不出来req.responseText
app.use(bodyParser.urlencoded())

案例：
node中的app.js

//引入express框架
const express=require('express')

//引入路径处理模块
 const path=require('path')
//使用post方式传参必须的模块
const bodyParser= require('body-parser')
//创建web服务器
const app=express();

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')))
//解析post请求头，使用post方式传参必须的模块。否则log不出来req.responseText
app.use(bodyParser.urlencoded())

//创建路由

app.post('/post',(req,res)=>{
  res.send(req.body)
})
//监听端口
app.listen(8848);

//控制台提示输出
console.log('服务器启动成功')

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<p>
  <input type="text" name="" id="uname"/>name
</p>
<p>
  <input type="password" name=""  id="pwd"/>name
</p>
<p>
  <input type="button" value="提交" id="btn"/>
</p>
<script type="text/javascript">
  //获取按钮元素
  var btn=document.getElementById("btn");
  var uname=document.getElementById('uname');
  var pwd=document.getElementById('pwd')
  //获取文本框的值
  btn.onclick = ()=> {
    //1、创建ajax对象
    let xhr = new XMLHttpRequest();
    //2、配置ajax对象
    //2.1拿文本框的值
    var nameValue=uname.value;
    var pwdValue=pwd.value;
    //2.2拼接字符串
    var params='username='+nameValue+'&pwd='+pwdValue
    //2.3配置ajax
    xhr.open('post','http://localhost:8848/post');
    //2.4post请求参数格式的类型，post方式必备
    xhr.setRequestHeader("Content-Type",  "application/x-www-form-urlencoded")
    //3、发送请求
    xhr.send(params)
    //4、获得反馈
    xhr.onload=()=>{
      console.log(xhr.responseText)
    }
  }

</script>
</body>
</html>

7、ajax请求参数的格式

1、"application/x-www-form-urlencoded"格式

name=zhagnsan&age=12&gender=male

2、json数据格式
需要在请求头中指定Content-Type属性的值是application/jason，告诉服务端当前请求参数的格式是json
传参前，要将json对象转换成json字符串，才能放在send中，使用JSON.stringify（）进行转换

{name:'zhangsan',age=12,'gender'='male'}

8、json方式请求数据

注意两点
1、引入body-parser模块
//使用post方式传参必须的模块

const bodyParser= require('body-parser')

2、设置解析json的文件格式

//创建web服务器
const app=express();
//解析post请求头，调用json的解析方法
app.use(bodyParser.json())

3、其他注意点

使用post传参
Content-type必须为application/jason
jason对象需要通过JSON.stringify()转换为字符串
get请求不能提交json格式参数的
传统网站的表单提交也不支持json对象数据格式的

案例
node的app.js文件

//引入express框架
const express=require('express')

//引入路径处理模块
 const path=require('path')
//使用post方式传参必须的模块
const bodyParser= require('body-parser')
//创建web服务器
const app=express();

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')))
//解析post请求头，调用json的解析方法
app.use(bodyParser.json())

//创建路由
app.post('/json',(req,res)=>{
  res.send(req.body)
})
//监听端口
app.listen(8848);

//控制台提示输出
console.log('服务器启动成功')

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<p>
  <input type="text" name="" id="uname"/>name
</p>
<p>
  <input type="password" name=""  id="pwd"/>name
</p>
<p>
  <input type="button" value="提交" id="btn"/>
</p>
<script type="text/javascript">
  //获取按钮元素
  var btn=document.getElementById("btn");
  var uname=document.getElementById('uname');
  var pwd=document.getElementById('pwd')
  //获取文本框的值
  btn.onclick = ()=> {
    //1、创建ajax对象
    let xhr = new XMLHttpRequest();
    //2、配置ajax对象
    //2.1拿文本框的值
    var nameValue=uname.value;
    var pwdValue=pwd.value;
    //2.2拼接字符串
    //var params='username='+nameValue+'&pwd='+pwdValue
    //2.3配置ajax
    xhr.open('post','http://localhost:8848/json');
    //2.4post请求参数格式的类型，post方式必备，这里是json格式
    xhr.setRequestHeader("Content-Type",  "application/json")
    //3、发送请求
    //3.1转换json对象为Jason字符串,使用JSON.stringify
    var str=JSON.stringify({name:nameValue,pwd:pwdValue })
    xhr.send(str)
    //4、获得反馈
    xhr.onload=()=>{
      console.log(xhr.responseText)
    }
  }

</script>
</body>
</html>

9、一个过时的获取服务器端响应的方式（不建议使用）

Ajax状态码：
在创建ajax对象，配置ajax对象，发送请求吗，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。

0：请求未初始化（还没有调用open（））
1：请求已经建立，但是还没有发送（还没有调用send（））
2：请求已发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获得并使用服务器的响应了。

如何获取ajax状态码

使用xhr.readyState获取状态码

xhr.readyState

使用onreadystatechange事件捕捉状态码改变
当ajax状态码发生变化时将自动触发该事件

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<p>
  <input type="text" name="" id="uname"/>name
</p>
<p>
  <input type="password" name=""  id="pwd"/>name
</p>
<p>
  <input type="button" value="提交" id="btn"/>
</p>
<script type="text/javascript">
  //获取按钮元素
  var btn=document.getElementById("btn");
  var uname=document.getElementById('uname');
  var pwd=document.getElementById('pwd')
  //获取文本框的值
  btn.onclick = ()=> {
    //1、创建ajax对象
    let xhr = new XMLHttpRequest();
    console.log(xhr.readyState)
    //2、配置ajax对象
    //2.1拿文本框的值
    var nameValue=uname.value;
    var pwdValue=pwd.value;
    //2.2拼接字符串
    //var params='username='+nameValue+'&pwd='+pwdValue
    //2.3配置ajax
    xhr.open('post','http://localhost:8848/json');
    console.log(xhr.readyState)
    //2.4post请求参数格式的类型，post方式必备，这里是json格式
    xhr.setRequestHeader("Content-Type",  "application/json")
    //3、发送请求
    //3.1转换json对象为Jason字符串,使用JSON.stringify
    var str=JSON.stringify({name:nameValue,pwd:pwdValue })

    //当ajax状态码发生变化的时候触发
    xhr.onreadystatechange=()=>{
      console.log(xhr.readyState)
      if (xhr.readyState==4){
        console.log(xhr.responseText)

      }
    }
    xhr.send(str)

    //4、获得反馈
    xhr.onload=()=>{
      //console.log(xhr.responseText)
    }
  }

</script>
</body>
</html>

10、两种获取服务器端响应方式的区别（建议使用onload）

在这里插入图片描述

11、ajax错误处理

- 1、网络正常，服务器端能接收到请求，服务器端返回的结果不是预期结果

可以判断服务器端返回的状态码，分别进行处理。
xhr.status获取http状态码
app.js

//引入express框架
const express=require('express')

//引入路径处理模块
 const path=require('path')
//使用post方式传参必须的模块
const bodyParser= require('body-parser')
//创建web服务器
const app=express();

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')))
//解析post请求头，调用json的解析方法
app.use(bodyParser.json())

//创建路由
app.get('/error',(req,res)=>{
  res.status(400).send('not ok')
})
//监听端口
app.listen(8848);

//控制台提示输出
console.log('服务器启动成功')

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<button id="btn">发送ajax请求</button>
<script type="text/javascript">
  //获取按钮元素
  var btn=document.getElementById("btn");
  //获取文本框的值
  btn.onclick = ()=> {
    //创建ajax对象
    var xhr=new XMLHttpRequest()
    //配置ajax请求地址和请求方式
    xhr.open('get','http://localhost:8848/error');
    //发送请求
    xhr.send()
    //onload接收请求返回
    xhr.onload=(req,res)=>{
      //xhr.status获取http状态码
      console.log(xhr.status);
      if (xhr.status==400) {
        document.write('请求出错')
      }
    }
  }

</script>
</body>
</html>

- 2、网络正常，服务器端没有接收到请求，返回404状态码
检查请求地址是否错误

- 3、网络正常，服务器端能接收到请求，服务器端返回500状态码
报500状态码，500 (Internal Server Error)

- 4、网络中断，请求无法发送到服务器
不会触发xhr的onload事件
但会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。
html

//查看onerror事件
    xhr.onerror=()=>{
      document.write('网络中断，无法发送请求')

    }

12、ajax状态码和http状态码的区别

ajax状态码：表示ajax请求的过程状态，是ajax对象返回的
http状态码：表示请求的处理结果，是服务器端返回的

13、低版本ie浏览器的缓存问题

在低版本的ie浏览器中，ajax请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的事缓存中的旧数据。

1、node的app.js

在node的app.js里要引入文件读取模块

//引入文件读取模块
const fs=require('fs')

完整代码

//引入express框架
const express=require('express')

//引入路径处理模块
 const path=require('path')
//使用post方式传参必须的模块
const bodyParser= require('body-parser')

//引入文件读取模块
const fs=require('fs')

//创建web服务器
const app=express();

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')))
//解析post请求头，调用json的解析方法
app.use(bodyParser.json())

//创建路由

//创建一个读取缓存的路由
app.get('/cache',(req,res)=>{
  //err参数是错误信息,result参数是文件读取结果
  fs.readFile('./mytest.txt',(err,result)=>{
    res.send(result)
  })
})

//监听端口
app.listen(8848);

//控制台提示输出
console.log('服务器启动成功')

2、html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<button id="btn">发送ajax请求</button>
<script type="text/javascript">
  //获取按钮元素
  var btn=document.getElementById("btn");
  //获取文本框的值
  btn.onclick = ()=> {
    //创建ajax对象
    var xhr=new XMLHttpRequest()
    //配置ajax请求地址和请求方式
    xhr.open('get','http://localhost:8848/cache');
    //发送请求
    xhr.send()
    //onload接收请求返回,但低版本ie不认，换成onreadystatechange
    xhr.onreadystatechange=(req,res)=>{
      //xhr.status获取http状态码
      if (xhr.readyState == 4 && xhr.status ==200) {
        document.write(xhr.responseText)
      }
    }

  }

</script>
</body>
</html>

低版本浏览器的解决方案
在请求地址后面加请求参数，保证每一次请求中的请求参数的值不同（案例中使用的是随机数，但是时间戳不香吗）

xhr.open('get','http://localhost:8848/cache?t='+Math.random());

14、同步异步的概念

异步：不会等待线程完成就会执行其他线程

15、ajax封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复
解决方案：将请求代码封装到函数中，发请求时调用函数即可

一个封装例子

   ajax({
      type:'get',
      url:'http://localhost:8848/cache',
      success:(data)=>{
        console.log(data)
      }
    })

案例：
请求参数要考虑的问题
1、请求参数位置的问题

将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置
get：参数放在请求地址的后面
post：参数放在send方法中

2、请求参数格式的问题（推荐json格式）
字符串键值对形式：application/x-www-form-urlencoded
参数名称=参数值&参数名称=参数值
json格式的形式：application/json
{name：‘zhangsan’，age：19}

传递对象数据类型对于函数的调用者更加友好
在函数内部对象数据类型转换为字符串数据类型更加方便

案例代码
node的app.js文件

//引入express框架
const express=require('express')

//引入路径处理模块
 const path=require('path')
//使用post方式传参必须的模块
const bodyParser= require('body-parser')

//创建web服务器
const app=express();

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')))
//解析post请求头，调用json的解析方法
app.use(bodyParser.json())

//创建路由
app.get('/first',(req,res)=>{
  res.send('hello ajax')
})

//监听端口
app.listen(8848);

//控制台提示输出
console.log('服务器启动成功')

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<script type="text/javascript">
  //封装一个ajax函数
  function ajax(options){
    //创建ajax对象
    let xhr=new XMLHttpRequest()
    //在get传参方式下，对json数据对象转换成字符串
    var params='';
    //将对象转换成字符串格式
    for (var attr in options.data){
      params += attr+'='+options.data[attr]+'&'
    }
    //截取多串的&符,从第一个到倒数第二个
    params=params.substr(0,params.length-1);
    //对请求方式进行判断，如果为get则，将params放入open方法的url字符串里，如果是post，则将params放入send方法中
    if (options.type=='get'){
      options.url = options.url+'?'+params
      console.log(options.url)
    }
    //配置ajax对象
    xhr.open(options.type,options.url)

    if (options.type=='post'){
      //如果为post还要调用setRequestHeader方法,设置请求参数格式的类型
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      xhr.send(params);
    }else{
      //发送请求
      xhr.send();
    }

    //处理响应信息
    xhr.onload=()=>{
      options.success(xhr.responseText);
    }

  }
  //执行这个封装函数并传入一个json对象，json对象配置了需要传入的参数
  ajax({
    type: 'get',
    url:'http://localhost:8848/first',
    //数据使用json对象形式进行封装
    data:{
      name:'zhangsan',
      age:20
    },
    success:(data)=>{
      console.log('这里是success函数的输出：'+data)
    }

  })

</script>
</body>
</html>

16、上例改进，当参数为json格式数据是的封装逻辑

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<script type="text/javascript">
  //封装一个ajax函数
  function ajax(options){
    //创建ajax对象
    let xhr=new XMLHttpRequest()
    //在get传参方式下，对json数据对象转换成字符串
    var params='';
    //将对象转换成字符串格式
    for (var attr in options.data){
      params += attr+'='+options.data[attr]+'&'
    }
    //截取多串的&符,从第一个到倒数第二个
    params=params.substr(0,params.length-1);
    //对请求方式进行判断，如果为get则，将params放入open方法的url字符串里，如果是post，则将params放入send方法中
    if (options.type=='get'){
      options.url = options.url+'?'+params
      console.log(options.url)
    }
    //配置ajax对象
    xhr.open(options.type,options.url)

    if (options.type=='post'){
      let contentType = options.header['Content-Type'];
      console.log(contentType)
      //如果为post还要调用setRequestHeader方法,设置请求参数格式的类型
      xhr.setRequestHeader('Content-Type',contentType);//由于有横杠，所以对对象的访问不使用点句法，而使用[]+引号
      //判断传入的文件头是否为json对象
      if (contentType === 'applictaion/json'){
        xhr.send(JSON.stringify(options.data));
      }else{
        //如果不是json格式，则send普通参数
        xhr.send(params);
      }
    }else{
      //发送请求
      xhr.send();
    }

    //处理响应信息
    xhr.onload=()=>{
      options.success(xhr.responseText);
    }

  }
  //执行这个封装函数并传入一个json对象，json对象配置了需要传入的参数
  ajax({
    type:'post',
    url:'http://localhost:8848/first',
    //数据使用json对象形式进行封装
    data:{
      name:'zhangsan',
      age:20
    },
    header:{
      'Content-Type':'application/json'
    },
    success:(data)=>{
      console.log('这里是success函数的输出：'+data)
    }

  })

</script>
</body>
</html>

17、上例改进，添加请求失败的逻辑

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<script type="text/javascript">
  //封装一个ajax函数
  function ajax(options){
    //创建ajax对象
    let xhr=new XMLHttpRequest()
    //在get传参方式下，对json数据对象转换成字符串
    var params='';
    //将对象转换成字符串格式
    for (var attr in options.data){
      params += attr+'='+options.data[attr]+'&'
    }
    //截取多串的&符,从第一个到倒数第二个
    params=params.substr(0,params.length-1);
    //对请求方式进行判断，如果为get则，将params放入open方法的url字符串里，如果是post，则将params放入send方法中
    if (options.type=='get'){
      options.url = options.url+'?'+params
      console.log(options.url)
    }
    //配置ajax对象
    xhr.open(options.type,options.url)

    if (options.type=='post'){
      let contentType = options.header['Content-Type'];
      console.log(contentType)
      //如果为post还要调用setRequestHeader方法,设置请求参数格式的类型
      xhr.setRequestHeader('Content-Type',contentType);//由于有横杠，所以对对象的访问不使用点句法，而使用[]+引号
      //判断传入的文件头是否为json对象
      if (contentType === 'applictaion/json'){
        xhr.send(JSON.stringify(options.data));
      }else{
        //如果不是json格式，则send普通参数
        xhr.send(params);
      }
    }else{
      //发送请求
      xhr.send();
    }

    //处理响应信息
    xhr.onload=()=>{
      //当http状态码等于200的时候
      if (xhr.status==200){
        //请求成功，调用处理成功情况的函数
        options.success(xhr.responseText,xhr);
      }else{
        //请求失败，调用处理失败情况的函数
        //把服务器返回的信息传给error函数
        options.error(xhr.responseText,xhr)
      }
    }

  }
  //执行这个封装函数并传入一个json对象，json对象配置了需要传入的参数
  ajax({
    type:'get',
    url:'http://localhost:8848/first',
    //数据使用json对象形式进行封装
    data:{
      name:'zhangsan',
      age:20
    },
    header:{
      'Content-Type':'application/json'
    },
    success:(data)=>{
      console.log('这里是success函数的输出：'+data)
    },
    error:(data,xhr)=>{
      console.log('这里是error函数的输出'+data)
      console.log(xhr)

    }

  })

</script>
</body>
</html>

node上的app.js中路由部分，添加一个400状态码

//创建路由
app.get('/first',(req,res)=>{
  res.status(400).send('hello ajax')

})

18、上例改进，添加服务器返回jason格式数据的处理逻辑

注意，不是请求时向服务器提交json格式数据，而是接收从服务器端返回的数据的处理逻辑

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<script type="text/javascript">
  //封装一个ajax函数
  function ajax(options){
    //创建ajax对象
    let xhr=new XMLHttpRequest()
    //在get传参方式下，对json数据对象转换成字符串
    var params='';
    //将对象转换成字符串格式
    for (var attr in options.data){
      params += attr+'='+options.data[attr]+'&'
    }
    //截取多串的&符,从第一个到倒数第二个
    params=params.substr(0,params.length-1);
    //对请求方式进行判断，如果为get则，将params放入open方法的url字符串里，如果是post，则将params放入send方法中
    if (options.type=='get'){
      options.url = options.url+'?'+params
      console.log(options.url)
    }
    //配置ajax对象
    xhr.open(options.type,options.url)

    if (options.type=='post'){
      let contentType = options.header['Content-Type'];
      console.log(contentType)
      //如果为post还要调用setRequestHeader方法,设置请求参数格式的类型
      xhr.setRequestHeader('Content-Type',contentType);//由于有横杠，所以对对象的访问不使用点句法，而使用[]+引号
      //判断传入的文件头是否为json对象
      if (contentType === 'applictaion/json'){
        xhr.send(JSON.stringify(options.data));
      }else{
        //如果不是json格式，则send普通参数
        xhr.send(params);
      }
    }else{
      //发送请求
      xhr.send();
    }

    //处理响应信息
    xhr.onload=()=>{
      //xhr.getResponseHeader()获取响应头中的数据
      let contentType= xhr.getResponseHeader('Content-Type')
      //暂存服务器响应会的数据内容
      let responseText=xhr.responseText;
      //如果响应类型中包含'application/json'则说明服务器返回的是json数据
      if (contentType.includes('application/json')){
        responseText=JSON.parse(responseText)
      }
      //当http状态码等于200的时候
      if (xhr.status==200){
        //请求成功，调用处理成功情况的函数
        options.success(responseText,xhr);
      }else{
        //请求失败，调用处理失败情况的函数
        //把服务器返回的信息传给error函数
        options.error(responseText,xhr)
      }
    }

  }
  //执行这个封装函数并传入一个json对象，json对象配置了需要传入的参数
  ajax({
    type:'get',
    url:'http://localhost:8848/responseData',
    //数据使用json对象形式进行封装
    data:{
      name:'zhangsan',
      age:20
    },
    header:{
      'Content-Type':'application/json'
    },
    success:(data)=>{
      console.log('这里是success函数的输出：')
      console.log(data)
    },
    error:(data,xhr)=>{
      console.log('这里是error函数的输出'+data)
      console.log(xhr)

    }

  })

</script>
</body>
</html>

node里app.js的添加返回json数据的路由

app.get('/responseData',(req,res)=>{
  res.send({ 'name':'zhangsan','age':19,'address':'beijing' })
})

19、上例改进，传参中的可选参数，设置默认参数替代options参数

另存成资源以备用：
封装好的网络请求代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
here is my server
<script type="text/javascript">
  //封装一个ajax函数
  function ajax(options){
    //声明一个默认参数对象,存储默认参数
    let defults={
      type: 'get',
      url:'',
      data:{},
      header:{
        'Content-Type':'application/x-www-form-urlencoded'
      },
      success:()=>{},
      error:()=>{}
    }

    //使用defaults覆盖options对象。用Object.assign（）进行覆盖
    //两个参数，用第二个参数覆盖第一个参数,使用options对象中的属性覆盖defaults对象中的属性
    Object.assign(defults,options);

    //创建ajax对象
    let xhr=new XMLHttpRequest()
    //在get传参方式下，对json数据对象转换成字符串
    var params='';
    //将对象转换成字符串格式
    for (var attr in defults.data){
      params += attr+'='+defults.data[attr]+'&'
    }
    //截取多串的&符,从第一个到倒数第二个
    params=params.substr(0,params.length-1);
    //对请求方式进行判断，如果为get则，将params放入open方法的url字符串里，如果是post，则将params放入send方法中
    if (defults.type=='get'){
      defults.url = defults.url+'?'+params
    }
    //配置ajax对象
    xhr.open(defults.type,defults.url)

    if (defults.type=='post'){
      let contentType = defults.header['Content-Type'];
      //如果为post还要调用setRequestHeader方法,设置请求参数格式的类型
      xhr.setRequestHeader('Content-Type',contentType);//由于有横杠，所以对对象的访问不使用点句法，而使用[]+引号
      //判断传入的文件头是否为json对象
      if (contentType === 'applictaion/json'){
        xhr.send(JSON.stringify(defults.data));
      }else{
        //如果不是json格式，则send普通参数
        xhr.send(params);
      }
    }else{
      //发送请求
      xhr.send();
    }

    //处理响应信息
    xhr.onload=()=>{
      //xhr.getResponseHeader()获取响应头中的数据
      let contentType= xhr.getResponseHeader('Content-Type')
      //暂存服务器响应会的数据内容
      let responseText=xhr.responseText;
      //如果响应类型中包含'application/json'则说明服务器返回的是json数据
      if (contentType.includes('application/json')){
        responseText=JSON.parse(responseText)
      }
      //当http状态码等于200的时候
      if (xhr.status==200){
        //请求成功，调用处理成功情况的函数
        options.success(responseText,xhr);
      }else{
        //请求失败，调用处理失败情况的函数
        //把服务器返回的信息传给error函数
        options.error(responseText,xhr)
      }
    }

  }
  //执行这个封装函数并传入一个json对象，json对象配置了需要传入的参数
  ajax({
    url:'http://localhost:8848/responseData',
    //数据使用json对象形式进行封装

    success:(data)=>{
      console.log('这里是success函数的输出：')
      console.log(data)
    },


  })

</script>
</body>
</html>