跟着博主一起学Ajax（一）-CSDN博客

本文链接：https://blog.csdn.net/weixin_45054614/article/details/117487562

一、Ajax基础

1.1 传统网站中存在的问题

网速慢的情况下，页面加载时间长，用户只能等待
表单提交后，如果一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

1.2 Ajax概述

Ajax它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提供用户浏览网站应用的体验

1.3 Ajax的应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

二、Ajax的运行环境

Ajax 技术需要运行在网站环境中才能生效，当前我会使用Node.js创建的服务器作为网站服务器来应用Ajax.直接打开HTML文件时不生效的哟！！！不知道Node.js的可以看我写的Nodejs文章

2.1 Ajax 运行原理

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

在这里插入图片描述

2.2 Ajax的实现步骤

创建Ajax对象

var xhr = new HMLHttpRequest();

告诉Ajax请求地址以及请求方式

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

发送请求

 xhr.send();

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

xhr.onload = function(){
	//通过xhr 下面的responseText来获取服务器端给客户端的响应数据
	console.log(xhr.responseText);
}

2.2.1 Ajax入门（代码示例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    //1、创建Ajax对象
  var xhr = new XMLHttpRequest()
    //2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    
    //xhr下面的open方法
    //第一个是请求方式   第二个是请求地址
    xhr.open('get','http://localhost:4000/frist');
    //3、发送请求
    //xhr下面的send方法发送请求
    xhr.send();
    //4、获取服务器端响应到客户端的数据
    xhr.onload = function(){
    //xhr.responseText 存储的就是服务器端响应给客户端的数据
        console.log(xhr.responseText)
    }
    </script>
</body>
</html>

这个时候你去启动服务器并访问，控制台是会报错的，因为我们现在并没有在服务器端设置这个/frist的路由地址
我们需要在app.js文件中去创建一个/frist路由地址

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 对应01html文件
app.get('/frist',(req,res) =>{
	res.send('HellO ajax');
})

// 监听端口
app.listen(4000);
// 控制台提示输出
console.log('服务器启动成功');

现在我们在启动服务器，去浏览器刷新，如果浏览器响应的是‘hello ajax’,就说明此次的响应式成功的
在这里插入图片描述
我们可以看到，在控制台，打印出来了这个hello ajax说明我此次是成功的

2.3 服务器端响应的数据格式（JSON对象）

在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接好的结果展示在页面中

在http请求与响应过程中,无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行输出

JSON.parse() //将json字符串转换为json对象

2.3.1 处理响应数据格式（代码示例）

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    //1、创建Ajax对象
  var xhr = new XMLHttpRequest()
    //2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    //01、请求方式 02请求地址
    xhr.open('get','http://localhost:4000/responseDate');
    //3、发送请求
    xhr.send();
    //4、获取服务器端响应到客户端的数据
    xhr.onload = function(){
    //将json字符串转换为JSON对象 用一个变量接收
       var responseText = JSON.parse(xhr.responseText)
        console.log(responseText)
		//使用字符串拼接的方法，将服务器端响应过来的数据，显示在页面上
        var str = '<h2>'+responseText.name+'</h2>'
    document.body.innerHTML = str;
    }
    </script>
</body>
</html>

app.js文件创建一个/responseDate路由

这里我没有吧之前的/frist路由代码删掉，后面的路由代码我都会依次写在里面

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 对应/frist路由
app.get('/frist',(req,res) =>{
	res.send('HellO ajax');
})

//对应  /responseDate路由
app.get('/responseDate',(req,res) =>{
	//给客户端响应一个JSON数据的格式，看看客户端
	res.send({"name":"xiaohu同学"});
})

// 监听端口
app.listen(4000);
// 控制台提示输出
console.log('服务器启动成功');

浏览器客户端的效果
在这里插入图片描述

2.4 在Ajax中如何请求参数传递（GET/ POST）

传统网站表单提交，会帮我们拼接好请求的参数

<form method="get" action="http://www.baidu.com">
     <input type="text" name="username"/>
     <input type="password" name="password">
 </form>
 <!-- http://www.baidu.com?username=xiaohu&password=123456=-->

Ajax的请求参数中，需要自己拼接请求参数，根据请求参数的不同，将不同的参数放到对应的位置上

GET请求方式

xhr.open('get', 'http://www.baidu.com?name=xiaohu&age=20');

POST 请求方式

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
xhr.send('name=xiaohu&age=20');

2.4.1 GET请求方式(代码示例)

创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <script type="text/javascript">
    //获取按钮元素
    var btn = document.getElementById('btn');
    //获取姓名文本框
    var username = document.getElementById('username');
    //获取年龄文本框
    var age = document.getElementById('age');
    //为按钮添加点击事件
    btn.onclick = function(){
        //创建ajax对象
        var xhr = new XMLHttpRequest();
        //获取用户在文本框中输入的值
        var nameValue = username.value;
        var ageValue = age.value;
        
        //拼接的样式为username=***&age=***
        //拼接请求参数
        var params = 'username='+nameValue +'&age='+ageValue;
        //配置ajax对象,将拼接好的参数放在请求地址中
        xhr.open('get','http://localhost:4000/get?'+params);
        //发送请求
        xhr.send();
        //获取服务器端响应的数据
        xhr.onload = function () {
            console.log(xhr.responseText)
        }
    }
    </script>
</body>
</html>

app.js文件创建一个/get路由

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 对应/frist路由
app.get('/frist',(req,res) =>{
	res.send('HellO ajax');
})

//对应  /responseDate路由
app.get('/responseDate',(req,res) =>{
	//给客户端响应一个JSON数据的格式，看看客户端
	res.send({"name":"xiaohu同学"});
})

//对应/get 路由
app.get('/get',(req,res) =>{
	//使用req.query来接收客户端传递到服务器端的get请求参数
	//并使用req.send来响应给客户端
	res.send(req.query);
})

// 监听端口
app.listen(4000);
// 控制台提示输出
console.log('服务器启动成功');

可以看到我们这里的数据拼接是成功了的
在这里插入图片描述
控制台也打印出来的响应的数据

2.4.2 POST请求方式（代码示例）

请求报文

在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。

代码示例（）
创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <script type="text/javascript">
    //获取按钮元素
    var btn = document.getElementById('btn');
    //获取姓名文本框
    var username = document.getElementById('username');
    //获取年龄文本框
    var age = document.getElementById('age');
    //为按钮添加点击事件
    btn.onclick = function(){
        //创建ajax对象
        var xhr = new XMLHttpRequest();
        //获取用户在文本框中输入的值
        var nameValue = username.value;
        var ageValue = age.value;      
        //拼接请求参数
        var params = 'username='+nameValue +'&age='+ageValue;
        //配置ajax对象
        //将请求方式修改为post
        xhr.open('post','http://localhost:4000/post');
        //设置请求参数的格式的类型（post请求必须要设置）
        //application/x-www-feom-urlencoded 是固定写法
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //发送请求
        xhr.send(params);
        //获取服务器端响应的数据
        xhr.onload = function () {
            console.log(xhr.responseText)
        }
    }
    </script>
</body>
</html>

打开 app.js文件创建一个/post路由

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
//引入第三方模块bodyParse  使用npm install body-parser
const bodyParser = require('body-parser');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 对应/frist路由
app.get('/frist',(req,res) =>{
	res.send('HellO ajax');
})

//对应  /responseDate路由
app.get('/responseDate',(req,res) =>{
	//给客户端响应一个JSON数据的格式，看看客户端
	res.send({"name":"xiaohu同学"});
})

//对应/get 路由
app.get('/get',(req,res) =>{
	//使用req.query来接收客户端传递到服务器端的get请求参数
	//并使用req.send来响应给客户端
	res.send(req.query);
})

//对应/Post路由
//在服务端要接收POST请求需要依赖第三方模块 bodyParser
app.post('/post',(req,res) =>{
	res.send(req.body)
})

// 监听端口
app.listen(4000);
// 控制台提示输出
console.log('服务器启动成功');

启动服务器，在浏览器就可以看到服务器端响应给客户端的数据了

2.5 请求参数的格式

1、application/x-www-form-urlencoded

name=xiaohu&age=20&sex=男

2、application/json

{name: ‘xiaohu’, age: ‘20’, sex: ‘男’}

在请求头中指定Content-Type 属性的值是application/json，告诉服务器当前的请求参数是json格式

 JSON.stringify()//将json对象转换为json字符串

注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。

2.5.1 代码示例

创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    //1、创建Ajax对象
  var xhr = new XMLHttpRequest()
    //2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    //01、请求方式 02请求地址
    xhr.open('post','http://localhost:4000/json');

	//通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
	xhr.setRequestHeader('Cont-Type','application/json');
    //JSON。stringify（）方法，将json对象转换为json字符串
    //JSON.path() 方法正好相反  将json字符串转换为json对象
    //3、发送请求
    xhr.send(JSON.stringify({name:'xiaohu',age:18}));
    //4、获取服务器端响应到客户端的数据
    xhr.onload = function(){
        console.log(xhr.responseText)
    }
    </script>
</body>
</html>

在app.js文件中创建一个/json名称的路由

app.post('/json',(req,res) =>{
	res.send(req.body)
})

将app.use 改为.json
在这里插入图片描述
可以看到客户端打印出来的是

2.6 获取服务端的响应

2.6.1 Ajax状态码

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

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

xhr.readyState //获取Ajax状态码

2.6.2 onreadystaechange事件

当Ajax 状态码发生变化时将自动触发该事件

2.6.3 代码示例

创建一个HTML文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    //1、创建Ajax对象
    var xhr = new XMLHttpRequest()
    //0 状态码为0 已经创建了对象，但是没有对ajax对象进行配置
    console.log(xhr.readyState);
    //1 已经对ajax对象配置，但是还没有发送请求
    xhr.open('get','http://localhost:4000/readystate');
    console.log(xhr.readyState);
    
    //当Ajax状态码发生变化的时候触发，使用onreadystatechange  
          xhr.onreadystatechange = function () {
      //2、请求已经送到
      //3、已经接收到服务器端
      //4、服务器端的响应数据已经接收完成  
      console.log(xhr.readyState)

      //对ajax状态码进行判断
      //如果状态码的值为4就代表数据已经接收完成了
      if (xhr.readyState == 4) {
      //打印出来  服务器端响应的数据hello
        console.log(xhr.responseText);
      }
    }
    xhr.send();
  </script>
</body>
</html>

找到app.js文件，按照之前的方法添加一个/readystate路由地址

//对应readystate路由
app.get('/readystate',(req,res) =>{
	//给客户端响应一个hello
	res.send('hello')
})

启动服务器，在浏览器地址中输入地址localhost:/端口号/html文件
在这里插入图片描述
这里就可以看到Ajax的状态码分别打印出来了，当ajax等于4的时候，就表示我们已经接收到了服务器端的响应数据，这个时候我们就要给它一个if判断,并打印出服务器端响应的数据，hello。

2.6.4 两种获取服务器端响应方式的区别（onload/onreadystatechange ）

区别描述	onload事件	onreadystatechange 事件
是否要兼容IE低版本	不谦容	兼容
是否需要判断Ajax状态码	不需要	需要
被调用的次数	一次	多次

2.7 Ajax错误处理

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
可以判断服务器端返回的状态码，分别进行处理。xhr.status获取http状态码
网络畅通，服务器没有接收到请求，返回404状态码。
检查请求地址是否错误
网络畅通，服务器端能接收到请求，服务器端返回500状态码
服务器端错误，做为一个前端人员看到这种错误就可以甩锅给后端了，让后端去解决了，
网络中断，请求无法发送到服务器端
会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

2.8 低版本IE浏览器的缓存问题（了解即可）

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

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

 xhr.open('get', 'http://www.example.com?t=' + Math.random());

三、Ajax异步编程

3.1 同步异步概述

同步

一个人同一时间只能做意见事情，只有一件事情做完，才能做另外一件事情
到代码中的表现就是，上一行代码执行完成后，才能执行下一行代码，即代码逐行执行。

console.log('1')
console.log('2')

异步

一个人一件事做了一半，转而去做其他事情，当其他的事情做完以后，在回头来做之前未完成的事情
到代码中的表现，就是异步代码虽然需要花费时间去执行，但程序不会等待异步代码执行完成后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完成后再回头看异步代码是否返回结果，如果已有返回结果，再调用事先准备好的回调函数处理异步代码执行的结果。

console.log('1');
 setTimeout(
    () => { console.log(2');
 }, 2000);
 console.log('3');
//代码的执行结果  就是为  1 3  2

3.2 代码示例

创建一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    //1、创建Ajax对象
  var xhr = new XMLHttpRequest()
    //2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    //01、请求方式 02请求地址
    xhr.open('get','http://localhost:4000/frist');
    //3、发送请求
    xhr.send();
    //4、获取服务器端响应到客户端的数据
    xhr.onload = function(){
        console.log('2');
        console.log(xhr.responseText)
    }
    console.log('1');
    </script>
</body>
</html>

这段代码在执行过程中，遵循代码从上往下执行，xhr.send后，首先会打印1，然后再去执行xhr.onload函数里面的2，然后在去打印服务器响应的值
在这里插入图片描述
这就说明了，我们的Ajax请求是一个异步的操作

3.3 Ajax封装

存在的问题：现阶段我们发送了一次请求，代码就这么多了，那我们发送多次请求代码是不是会冗余并且有很多代码是重复的呢？

解决方案：将请求代码封装到函数中，发送请求时调用这个函数就可以了

ajax({//ajax是这个函数的名字，传递了一个对象进去
	type:'get',//请求方式
	url:'http://www.baidu.com',//请求地址
	success:function(data){//success 表示请求成功后，处理结果的函数
		console.log(data);
   }
})

3.3.1 Ajax封装01（实现一个最基本的封装代码示例）

创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
	//定义一个函数
	//由于下面调用了ajax,并且传递了一个实参
	//所以我们要在这个（）传递一个形参 名称可以任意取
	//这里的options就相当于下面的ajax了
	function ajax (options){
	//创建ajax对象
    var xhr = new XMLHttpRequest();
    //配置AJAX对象
    //通过options.type就可以获取到请求方式了
    //通过options.url，就可以获取到请求的地址了
    xhr.open(options.type,options.url)

	//发送请求
	xhr.send();
	//监听xhr对象下面的onload事件
	//当xhr接收完响应数据后触发
	xhr.onload = function(){
	  //调用的时候 传递了一个实参xhr.responseText
		options.success(xhr.responseText);
     }
}

//调用ajax,并且传递了一个实参
      ajax({
      // type 代表请求方式
		type:'get',
	  //请求地址
	  url:'http://localhost:4000/xiaohu',
	  //这个success是在onload请求成功后调用的
	  //data 是一个形参
	  success:function(data){
	  		console.log(data)
	    }
     })
   </script>
</body>
</html>

本段代码中，请求地址的路由是要在app.js中定义的，具体的可参考之前的代码

3.3.2 Ajax封装02（对上一段封装代码扩展）

这段代码我尽可能的将大部分的代码进行了注释说明
比较难懂，所以需要仔细看清楚了，各个部分的逻辑（博主我也比较懵逼）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
	//定义一个函数
	//由于下面调用了ajax,并且传递了一个实参
	//所以我们要在这个（）传递一个形参 名称可以任意取
	//这里的options就相当于下面的ajax了
	function ajax (options){
	//存储的是默认值
      var defaults ={
		type:'get',
		url:'',
		data:{},
		 header:{
		'Content-Type':'application/application/x-www-from-urlencoded'
        },
         success:function(){},
	     error:function(){},
         };
         //使用options对象中的属性覆盖defaults对象中的属性
         Object.assign(deafaults,options)



	//创建ajax对象
    var xhr = new XMLHttpRequest();
    //拼接请求参数的变量
    var params = ''
	//循环用户传递进来的格式参数
	for(var attr in defaults.data){
	//将参数转换为字符串格式
		params += attr + '=' + defaults.data[attr] +'&'
    }
    //将参数最后面的&截取掉
    //将截取掉的结果重新赋值给params
   params= params.substr(0,params.length-1)
    //可以使用console.log(params) 检查

	//判断请求方式
	if(defaults.type =='get'){
		defaults.url = defaults.url + '?' + params;
     }
	

    //配置AJAX对象
    //通过options.type就可以获取到请求方式了
    //通过options.url，就可以获取到请求的地址了
    xhr.open(defaults.type,defaults.url)
    //如果请求方式为post
	if(defaults.type == 'post'){
	//用户希望像服务器传递的请求参数的类型
	var contentType=defaults.header['Content-Type']
	//设置请求参数格式的类型
		xhr.setRequestHeader('Content-Type', contentType);
		//判断用户希望的请求参数格式类型
		//如果是JSON的数据类型
		if(contentType == 'application/json'){
		//向服务器端传递JSON数据格式的参数
			xhr.send(JSON.stringify(defaults.data))
        }else{
        //如果不是，则向服务器端传递普通类型的请求参数
			xhr.send(params);
              }	 
      }else{
        //发送请求
	   xhr.send();
      }
	
	//监听xhr对象下面的onload事件
	//当xhr接收完响应数据后触发
	xhr.onload = function(){

	//xhr.getResponseHeader()
	// 获取响应头中的数据
    var contentType = xhr.getResponseHeader('Content-Type');
    //服务器端返回的数据
    var responseText = xhr.responseText;
    //这句的意思就是说判断当前字符串里面是否包含某个字符
    // 如果包含就返回true 否则就是false
      if(contentType.includes('application/json')){
      //将json字符串转换为JSON对象，并且赋值给responseText
    responseText = JSON.parse(responseText)
      }


        //当http状态码等于200的时候
	if(xhr.status == 200){
	 //  请求成功 调用处理成功情况的函数
	  //调用的时候 传递了一个实参xhr.responseText
		options.success(responseText ,xhr);
		}else{
		//请求失败 调用处理失败情况的函数
		  options.error(responseText ,xhr);
         }
     }
}

//调用ajax,并且传递了一个实参
      ajax({
      // type 代表请求方式
		//type:'get',
	  //请求地址
	  url:'http://localhost:4000/xiaohu',
	  //data:{	name:'xiaohutongxue',age:18 },
      // header:{'Content-Type':'application/application/x-www-from-urlencoded' }
	  //这个success是在onload请求成功后调用的
	  //data 是一个形参
	  success:function(data){	console.log('success函数'+ data) },
	  // error:function(data){console.log('error函数' + data)},
     })

       /* 请求参数要考虑的问题
        1、请求参数的问题
            将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置

            get 放在请求地址的后面
            post 放在send方法中
        
        2、请求参数格式的问题
            application/x-www-form-urlencoded
                name = zhangsan&age = 20
            参数名称 = 参数值&参数名称=参数值

            application/json
            { name:"zhangsan",age:20}
            1、传递对象数据类型对于函数的调用者更加友好
            2、在函数内部对象数据类型转换为字符串的类型更加方便
            */
	
   </script>
</body>
</html>