设计网页与创建网站吗,网页微信版传输助手,好牌子商城网,wordpress更改网页标题Ajax
一Ajax概述 ajax全名 asynchronous javascript and XML ( 异步JavaScript 和 XML ) ajax 不是新的编程语言#xff0c;而是一种用于创建更好更快以及交互性更强的Web应用程序的技术 ajax 是前后台交互的能力#xff0c;也就是我们客户端给服务端发送消息的工具#…Ajax
一Ajax概述 ajax全名 asynchronous javascript and XML ( 异步JavaScript 和 XML ) ajax 不是新的编程语言而是一种用于创建更好更快以及交互性更强的Web应用程序的技术 ajax 是前后台交互的能力也就是我们客户端给服务端发送消息的工具以及接收响应的工具 ajax 通过在后台与服务器进行少量的数据交换实现了在无需重新加载整个页面的情况下更新页面局部数据的技术 ajax 是一个默认异步执行机制的功能其分为同步asyncfalse和异步asynctrue 什么是同步请求 /* 同步请求是指当前发出请求后浏览器什么都不能做
必须得等到请求完成返回数据后才会执行后续的代码
也就是说当JS代码加载到当前ajax的时候会把页面里所有
的代码停止加载页面处于一个假死状态当这个ajax执行完毕
后才会继续运行其他代码页面解除假死状态 */什么是异步请求(默认) /* 异步请求就是当发出请求的同时浏览器可以作任何事
ajax发送的请求并不会影响页面的加载和用户的操作
不会影响到用户的体验效果 */二.Ajax的优缺点
1.优点
不需要插件的支持原生的JS就可以实现不需要刷新页面就可以更改数据异步与服务器通信优化了Browser和Server之间的沟通减少了不必要的数据传输、时间及降低网络上数据流量前端和后端负载平衡Ajax 可以把以前一些服务器负担的工作转嫁到客户端利用客户端闲置的能力来处理减轻服务器和带宽的负担节约空间和宽带租用成本Ajax的原则是“按需取数据”可以最大程度减少冗余请求和响应对服务器造成的负担提升站点性能基于标准被广泛支持Ajax 基于标准化的并被广泛支持的技术不需要下载浏览器插件或者小程序但需要用户允许JavaScript在浏览器上的执行界面与应用分离也就是说数据与呈现分离有利于分工合作减少非技术人员对页面的修改造成的WEB应用程序的错误、提高效率、也更加适用于现在的发布系统
2.缺点
对搜索引擎支持较弱如果使用不当Ajax会增大网络数据流量从而降低整个系统的性能如果客户禁用JS网站就取不到数据
三.Ajax的使用
1.运用原理 2.具体操作流程
首先通过PHP页面将数据库中的数据取出取出后转成json格式的字符串后利用ajax把字符串返还给前台在利用 json.parse解析通过循环添加到页面上那么反之前端的数据可以利用 ajax 提交到后台但是后台是没有办法直接把这些数据插入到数据库中的所以要先提交到PHP页面上最后又PHP将数据插入到数据库中
3.使用步骤
3.1 XMLHttpRequest 对象 XMLHttpRequest 是浏览器接口对象该对象的API可被JavaScript、VBScript 以及其他 web 浏览器内嵌的脚本语言调用通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其他数据。XMLHttpRequest 可以与服务器实现异步交互而无需让整个页面刷新因此成为 Ajax 编程的核心对象 XMLHttpRequest 对象属性描述用于和服务器交换数据
3.2 Ajax 的使用步骤
//1.创建 XMLHttpRequest 对象
var xhr new XMLHttpRequest();
//2.给定请求方式、请求地址以及是否异步(默认为true表异步)
xhr.open(get,url地址);
//3.发送请求
xhr.send();
//4.获取服务器端给客户端的响应数据
xhr.onreadystatechange function(){if(xhr.readyState 4 xhr.status 200){//JSON.parse()方法实现JSON字符串转换为JS对象var info JSON.parse( xhr.responseText );}
}3.3 Get/Post请求
get 请求一般用来请求获取数据post 请求一般作为发送数据到后台传递数据创建数据get 请求也可以传参到后台但是传递的参数则显示在地址栏安全性低且参数的长度也有限制(2048字符)post请求则是将传递的参数放在 request body 中不会在地址栏显示安全性比get请求参数没有长度限制get 请求刷新浏览器或者回退没有影响post请求则会重新请求一遍get 请求可以被缓存也会保留在浏览器的历史纪录中post 请求不会被缓存也不会保留在浏览器的历史纪录中get 请求通常是通过 url 地址请求post 常见的则是 form 表单请求
3.4 Ajax 状态码 Ajax 状态码xhr.readyState是用来表示一个 ajax 请求的全部过程中的某一个状态 /*
0请求未初始化也就是 open 方法还未执行
1服务器连接已建立即 open 方法已被执行完
2请求已接收表示 send 方法已 执行完成
3请求处理中即正在解析响应内容
4请求已完成且响应已就绪也就是说内容解析完毕可以在客户端使用
*/这时候我们会发现在一个 ajax 请求的全部过程中只有当 readyState 4 的时候我们才可以正常使用服务端给我们的数据 且配合 http 状态码为 200 ~ 299 /* 一个 ajax 对象中有一个成员叫做 xhr.statue ,这个成员就是记录本次请求的 http 状态码的 */俩个条件都满足的时候才是本次请求正常完成
3.5 readyStateChange
在 ajax 对象中有一个事件叫 readyStateChange事件这个事件是专门用来监听 ajax 对象的 readyState 值改变的行为即只要 readyState 的值发生改变就触发该事件因此我们就在该事件中监听 readyState、status 的值
3.6 解析主体
xhr.responseText 获得字符串形式的响应数据xhr.responseXML获得 XML 形式的响应数据
