02-DB-AJAX

Posted 2021-04-15 MyMethod

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了02-DB-AJAX相关的知识，希望对你有一定的参考价值。

1 AJAX简介

1.1 Ajax 是什么

Ajax 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。

1.2 Ajax 应用场景

Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:

商品系统。
评价系统。
地图系统。

说明:Ajax最大劣势是不能直接进行跨域访问.

1.3 Ajax 应用模型分析

所有的Ajax 请求都会基于DOM(html元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新。

2 AJAX基本应用

2.1 Ajax编程步骤

第一步:注册dom(html 元素)事件

第二步:创建XHR（XMLHttpRequest）对象

第三步:注册XHR对象状态监听

第四步:创建与服务端的连接

第五步:发送异步请求实现与服务端的通讯

第六步:获得响应结果并进行数据更新.(非阻塞)

2.2 Ajax编程实现(了解)

2.2.1 Ajax Get请求

基于ajax中XMLHttpRequest对象,向服务端发起异步GET请求.

function doAjaxGet(url){ //1.构建XHR对象并注册监听 var xhr=new XMLHttpRequest(); //2.注册监听函数(监听与服务端通讯过程) xhr.onreadystatechange=function(){//callback //readyState==4表示通讯结束 //status==20 表示服务端响应OK if(xhr.readyState==4&&xhr.status==200){ //responseText表示服务端响应的结果 console.log(xhr.responseText);  } } //3.建立连接 xhr.open("GET",url,true);//true代表异步 //4.发送请求 xhr.send(null);//get请求send方法内部不传参数}

2.2.2 Ajax Post请求

基于ajax中XMLHttpRequest对象，向服务端发起异步Post请求，对于post请求在发送请求执行需要设置请求头,见红色代码部分.

function doAjaxPost(url,params){ //1.构建XHR对象并注册监听 var xhr=new XMLHttpRequest(); //注册监听函数(监听与服务端通讯过程) xhr.onreadystatechange=function(){//callback //readyState==4表示通讯结束 //status==20 表示服务端响应OK if(xhr.readyState==4&&xhr.status==200){ //responseText表示服务端响应的结果 console.log(xhr.responseText);  } } //2.建立连接 xhr.open("POST",url,true);//true代表异步 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //3.发送请求 xhr.send(params);//post请求send方法内部传参数}