本文共 1896 字，大约阅读时间需要 6 分钟。
ajax 是JavaScript提供的,与后端进行数据交互的方法 之前使用的form表单和a超链接,都是HTML的数据交互方法 优点: 1,不用页面跳转,就可以完成数据交互 2,可以减轻服务器压力 步骤: 1,创建ajax请求实例化对象 2,设定请求相关信息 3,发送请求 4,接收响应
超链接跳转传参和form表单跳转传参都必须要跳转页面,而且是去后端程序页面不利于前端开发之后,我们使用ajax来发送请求数据等,与后端程序进行数据交互ajax发送请求,完成数据交互,优点 不用跳转页面,在当前页,就可以显示数据交互的结果 所有的页面渲染操作,生成页面操作,都是在前端完成,减轻服务器的操作压力 不用跳转,减轻服务器压力什么是ajax a : async 异步 j : JavaScript a : and x : XML 一个异步的 JavaScript 和 XML 的数据交互 ajax技术最初只能和 XML格式的内容进行交互 现在发展到可以和任意的后端程序内容进行交互 现在是前后端数据交互的主要手段基本步步骤过程 1,创建一个ajax对象 const xhr = new XMLHttpRequest(); 2,配置定义请求信息内容 xhr.open( '请求方式' , '请求地址?键名=数值&键名=数值...' ); get方式可以在请求地址之后,拼接参数 3,发送ajax请求 xhr.send(); 4,接收相应内容 xhr.onload = function(){ } ajax请求总结1 ajax请求的本质 通过JavaScript方式,与后端程序以及数据库,进行交互 之前的方式是 form表单 或者 超链接 都属于 HTML方式 ajax请求的基本过程原理 通过 ajax请求 是JavaScript定义好的程序 向后端发送请求以及数据 后端程序跟发送的请求以及数据,对数据库进行操作,并且获取操作结果 ajax请求,通过响应体,获取后端操作结果 优点: 1,不用跳转页面,也可以在局部进行发送请求,获取响应结果 2,页面渲染,可以通过前端操作完成,减轻后端程序压力 程序执行步骤 1,创建ajax实例化对象 const xhr = new XMLHttpRequest(); 2,设定ajax对象,请求信息 请求的方式 请求的对象地址 如果是get方式,可以在请求地址之后拼接参数 xhr.open('get' , 'url地址?键名=数值&键名=数值...'); xhr.open('post' , 'url地址'); 3,如果是post方式,必须要设定请求头,确保可以正确传参 get方式不要设定 语法形式是固定格式的内容 xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded'); 4,发送请求 如果是get方式,是直接发送请求 xhr.send() 如果是post方式,需要在send()中定义参数 xhr.send('键名=数值&键名=数值...') xhr.send(`键名=${ 数值}&键名=${ 数值}...`) 5,接收响应体 xhr.onload = function(){ 请求结束后要执行的内容 请求结果,也就是响应体 存储在 xhr.response 中 } 转载地址：http://bpaiz.baihongyu.com/