【Ajax一文搞懂】学习笔记day1

记录Ajax学习

 传统网站中存在的问题：

网速慢的情况下，页面加载时间长，用户只能等待。

表单提交后，如果一项内容不合格，需要重新填写所有表单内容。

页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。

浏览器提供的方法，实现页面无刷新更新数据，在不刷新页面的情况下，向服务器端发起数据请求，当服务器端返回数据时，将数据通过js加载到页面当中。

 应用场景

页面上拉加载更多数据

列表数据无刷新分页

表单项离开焦点数据验证

搜索框文字自动提示

 运行环境

网站环境/Node创建静态资源服务器

Ajax技术虽然属于客户端js代码，但是它需要运行在网站环境中才能生效，即运行Ajax技术的Html页面需要放在网站服务器下运行，要能以localhost域名的方式打开页面，不能直接双击Html文件直接运行它，否则代码将不能生效。借助Node开启一个网站服务器，实现静态资源访问功能，将代码写在HTml文件中，将Html文件放在静态资源文件夹当中，就能通过域名的方式，访问这个HTML文件。

Ajax--详细的环境搭建https://www.cnblogs.com/technicist/p/12730501.html

这个文件夹就是网站的根目录

通过require的方式引入express框架，使用express框架可以快速创建网站服务器，接下来引入系统模块path，它主要用来处理路径，使用它来处理静态资源文件夹目录。使用app.use()拦截所有请求，将所有请求交给express.static（）方法处理，为我们实现静态资源访问功能，将静态资源文件夹定义为public文件夹，所以后续所有html文件都要放在public下，最后使用listen（）方法监听3000端口，所以在浏览器当中，就可以通过localhost:3000的方式访问静态资源文件夹中的静态资源文件。

 运行原理

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

 Ajax 实现步骤

1、创建Ajax 对象

var xhr = new XMLHttpRequest() 创建此函数的实例对象，就是在创建Ajax 对象，XML--服务器端与客户端传输数据的内容格式，在Ajax请求中，服务器端返回给客户端，数据类型一般为JSON数据格式，HttpRequest -- Http请求。

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

xhr.open('get', 'Example Domain') 通过xhr 下面的open方法 -- get/post --  服务器端对应的路由地址。

3、发送请求

xhr.send()

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

xhr.onload = function() {         console.log(xhr.responseText);       } 由于请求受网络速度快慢的影响，是需要一定的时间才能完成，时间不确定，不能再send（）方法后面直接获取请求的结果，而需要为xhr对象下面的onload事件添加事件处理函数。当服务器端对客户端做出了响应，浏览器就会自动调用xhr下面的onload事件对应的事件处理函数，在事件处理函数中可以对数据做处理。

先开启网站服务器，才能以域名的方式访问静态资源文件（Html文件）

在命令行中执行nodemon app.js，开启网站服务器

在服务器中创建一个路由

app.get('/first', (req, res) => {   res.send('Hello Ajax') })

路由的请求地址是/first，第二参数是请求处理函数 req -- 请求对象，res -- 响应对象，在当前这个路由请求处理函数中，要向客户端响应一点内容 --'Hello Ajax'

客户端

<script>     var xhr = new XMLHttpRequest()     xhr.open('get', 'http://localhost:3000/first')     xhr.send()     xhr.onload = function() {       console.log(xhr.responseText);     } </script>

服务器端

 服务器端响应的数据格式

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

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

JSON.parse()

在window对象下有一个JSON对象，在JSON对象有一个parse()方法，由于window对象是全局对象，所以省略了。

<script>     var xhr = new XMLHttpRequest()     xhr.open('get', 'http://localhost:3000/responseData')     xhr.send()     xhr.onload = function() {       var responseText = JSON.parse(xhr.responseText)       var str = '<h2>'+ responseText.name +'</h2>'       document.body.innerHTML = str     } </script>

 

 请求参数传递

传统网站表单提交，只要表单提交，根据请求方式的不同，表单内容会变成请求参数被自动拼接到对于的内容中，get请求参数被拼接到请求地址后面，post请求参数会被放在请求体当中。参数格式都是参数名称 = 参数值，多个参数之间用 & 连接。

在Ajax请求中，需要自己拼接请求参数。根据请求方式的不同，将请求参数放到对于的位置上，参数的格式没有发生变化：参数名称 = 参数值，多个参数之间用 & 连接。

get请求，参数被拼接到请求地址后面，用 ？分隔。

GET请求方式

客户端 var params = 'username='+nameValue+'&age='+ageValue xhr.open('get', 'http://localhost:3000/get?'+params) 服务端 app.get('/get', (req, res) => {   res.send(req.query) })  req -- 请求对象，req.query 获取客户端表单信息，res.send()再将信息返回客户端查看

 

post请求，参数不是放在地址栏后面，而是要放在请求体当中。post请求必须在请求报文中明确设置请求参数内容的类型，即Content-Type属性，内容的类型是application/x-www-form-urlencoded。setRequestHeader('报文属性的名称', '报文属性的值')设置请求报文的报文头信息。

POST请求方式

客户端 var params = 'username='+nameValue+'&age='+ageValue       xhr.open('post', 'http://localhost:3000/post')       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')       xhr.send(params)       xhr.onload = function() {         console.log(xhr.responseText);       } 服务器端 const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded())  // 表示要解析 application/x-www-form-urlencoded 这种格式的参数 app.post('/post', (req, res) => {   res.send(req.body) })

application/json格式

客户端

<script>     // 创建Ajax对象     var xhr = new XMLHttpRequest()     xhr.open('post', 'http://localhost:3000/json')     // 通过请求头告诉服务器客户端向服务器端传递的请求参数格式是什么     xhr.setRequestHeader('Content-Type', 'application/json')     xhr.send(JSON.stringify({name: 'lisi', age: 50}))  // 将json对象转换为json字符串     xhr.onload = function() {       console.log(xhr.responseText);     }   </script>

服务器端

const bodyParser = require('body-parser'); app.use(bodyParser.json()) // 表示要解析 application/json 这种格式的参数 app.post('/json', (req, res) => {   res.send(req.body) })

 

 请求报文

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

 请求参数的格式

1、application/x-www-form-urlencoded

2、application/json

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

 获取服务器端的响应

Ajax状态码

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

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

onreadystatechange() 当Ajax状态码发生变化时自动触发该事件.

var xhr = new XMLHttpRequest()     // 0 已经创建了ajax对象 但是还没有对ajax对象进行配置     console.log(xhr.readyState);     xhr.open('get', 'http://localhost:3000/readystate')     // 1 已经对ajax对象进行配置 但是还没有发送请求     console.log(xhr.readyState);     // 当ajax状态码发生变化的时候触发     xhr.onreadystatechange = function (){       // 2 请求已经发送       // 3 已经接受服务器端部分数据       // 4 服务器端的响应数据已经接收完成       console.log(xhr.readyState);       // 如果状态码的值为4就代表数据已经接收完成了       if(xhr.readyState === 4) {         console.log(xhr.responseText);       }     }