传统网站中存在的问题

Ajax：标准读音['ei d3aeks]，幅译：阿贾克斯

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

Ajax的应用场景

Ajax技术需要运行在网站环境中才能生效，当前会使用Node创建的服务器作为网站服务器。

Ajax运行原理及实现

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

Ajax的实现步骤

// 1 创建Ajax对象
let xhr = new XMLHttpRequest();

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

// 发送请求
xhr.send();

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

你想要看到效果，你首先要新建一个文件夹， 在文件夹里新建一个app.js的文件，然后在新建一个文件夹，里面待会要放html文件！ 如下列文字和图片所示：

app.js 这儿我就不再使用上面的接口地址了！我会在本地写地址！用本地的服务器来实现我们的目标！

const express = require('express');
const path = require('path');
// 创建web服务器！
const app = express();
// 引用request模块! 返回一个request函数
// 向其他服务器端请求数据的模块!服务器端是不受同源政策的影响的！
const request = require('request');

// 静态资源服务访问功能！
app.use(express.static(path.join(__dirname, 'lvhang')))
app.listen(3003)
console.log('the backgroundServer is running ！ port is 3003')
// console.log(__dirname)
// console.log(path.join(__dirname, 'lvhang'))
// console.log(path.join(__dirname, 'lvhang', 'lvchengxin'))

html代码其实也就是Ajax的实现步骤

	
	
	


	
测试页面！

然后你需要在控制台界面运行服务器端的程序！

在真实的项目中，务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在面中。
要实现上面的需求其实很简单我还是用上面的服务器举例子！我们只需要改一点点东西就行了！
app.js改动点：


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

		JSON.parse(); // 将json字符串解析为json对象！

html文件改动点！

		// 获取服务器端响应到客户端的数据！
		xhr.onload = function() {
			let transform = JSON.parse(xhr.responseText)
		console.log(transform);
		let str = '
'+transform.name+'
'
		document.body.innerHTML = str

		}

使用Ajax技术如何传递请求参数

Ajax中提交

	xhr.open('get', 'http://localhost:3003/test');

需求：我们需要把表单中的内容发送到服务器端！进行字符串拼接！【username=123&age=456】怎么做!狠狠地做!
当然，还是为了快速完成需求，我还是用上面已经创建好了的服务器！

html代码：

    
    
    



    
    
测试页面！
    

        
    
    

        
    
    

        提交
    
    

服务器端改动代码：

app.get('/test', (req, res) => {
	// 在服务器端如何接收客户端传递过来的请求参数呢！？!
	// 注意：这个要通过req,query来获取！
      // req.query返回的是一个JavaScript对象？!
	res.send(req.query);
})

2 POST请求方式！

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

请求参数的格式

Ajax 状态码

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

html文件！

    
    
    



    
    
测试页面！

    

服务端代码改动点：

app.get('/test', (req, res) => {
    res.send('这种获取服务端响应的方法已经过时了!')
})

效果展示：

** 两种获取服务器端响应方式的区别 **

Ajax 错误处理

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

Ajax 异步编程

同步:

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

console.log('before')；

 setTimeout(() => {
                console.log('last');
            }, 2000)

console.log('after');

上面所说的异步对应在Ajax里面就是onload事件！
其实不用在Ajax请求里面测试代码的执行顺序！

你就说这个代码的执行顺序是什么，你就明白在Ajax里面代码的执行顺序了！

console.log('before')；

 setTimeout(() => {
                console.log('last');
            }, 2000)

console.log('after');

Ajax 封装

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

本文来自博客园，作者：{lvhanghmm}，转载请注明原文链接：