ajax div 赋值重新渲染_30分钟全面解析图解AJAX原理
阅读目录
一、什么是 AJAX
二、提交Form表单的原理
三、提交请求和服务响应的原理
四、XMLHttpRequest 对象的知识
五、JQuery实现AJAX
六、优势
七、缺点
八、应用场景
九、不适用场景
阅读本文需要30分钟,请先收藏转发后再看。
先上原理图:
背景:
1.传统的Web网站,提交表单,需要重新加载整个页面。
2.如果服务器长时间未能返回Response,则客户端将会无响应,用户体验很差。
3.服务端返回Response后,浏览器需要加载整个页面,对浏览器的负担也是很大的。
4.浏览器提交表单后,发送的数据量大,造成网络的性能问题。
问题:
1.如何改进?
2.AJAX是什么?
3.有什么优势?
4.有什么缺点?
一、什么是AJAX
1.为什么需要AJAX
当需要从服务器获取数据,并刷新页面的操作,如果不采用AJAX,则需要用提交整个表单的方式,当提交表单时,发送请求给服务器,页面需要等待服务器发送完response后,页面才能恢复操作。
2.AJAX的概念:
1.AJAX = 异步 JavaScript 和 XML。
2.AJAX 是一种用于创建快速动态网页的技术。
3.通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。
4.可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
3.什么叫异步
当前页面发送一个请求给服务器,当前页面不需要等待服务器响应才能操作网页。发送完请求之后,当前页面可以继续浏览,操作。
4.什么叫局部刷新
我们可以用两种方式来实现部分刷新。
1. iframe页面重载的方式。
这种方式虽然实现了部分刷新,但是是页面的重载,所以也会带来性能上的问题。
Step1.在页面中定义一个Iframe
<iframe id="indexFrame" name="index" width="1000" height="800" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="margin-top:100px;">iframe>
Step2.设置Iframe的src
var indexFrame = document.getElementById("indexFrame");indexFrame.src = "introduction.php";
Step3.添加一个button的点击事件,当点击这个button时,重新设置Iframe的src,实现iframe里面的页面刷新。Iframe外面的内容不刷新。
<button id="room" onclick='IndexClick("room")'>Click Me!button>
function IndexClick(moduleKey) { var indexFrame = document.getElementById("indexFrame"); if(indexFrame == null) { indexFrame = parent.document.getElementById("indexFrame"); } var url = "introduction.php"; switch (moduleKey) { case "introduction": url = "introduction.php"; break; case "room": url = "room.php"; break; default: { } } indexFrame.src = url;}
通过这种方式我们可以实现一个导航栏的功能:
2.AJAX方式
Step1.JavaScrpit发送异步请求
Step2.服务端查询数据库,返回数据
Step3.服务端返回Response
Step4.客户端根据返回的Response,来用JavaScript操作DOM。
看下面的例子:
当我们切换DropDownList中的Item时,JavaScript发送异步请求给Server端,Server端返回数据,然后JavaScript将数据解析出来,拼接了一个Table,将Table呈现在页面上。
二、提交Form表单的原理
1.代码
客户端代码:
<form id="form1" action="Test.ashx" method="get"> 您的姓名1:<input type="text" name="fname" size="20" /> <input type="submit" name="submit" value="Sumbit"> form>
服务端代码:
public void ProcessRequest (HttpContext context){ //Delay for (int i = 0; i < 2; i++) { System.Threading.Thread.Sleep(1000); } //从Requset.Form中获取fname的值。使用Form获取请求的键值对的值的前提条件是HTTP request Content-Type 值必须是"application/x-www-form-urlencoded" 或 "multipart/form-data". string fname = context.Request["fname"]; context.Response.ContentType = "text/plain"; //将字符串写入 HTTP 响应输出流。 context.Response.Write("Hello World " + fname); }
2.将代码部署到IIS
3.打开站点:
http://localhost:8003/Test.html
4.输入“Jackson0714”然后点击Sumbit按钮
页面会重新刷新,显示"Hello World Jackson0714"
5.提交Form表单后,页面发送请求和服务端返回响应的流程
6.通过抓包,我们可以得到HTTP Headers
浏览器发送HTTP给服务端,采取的协议是HTTP协议。
在传输过程中,我们可以看下HTTP Headers。
三、AJAX提交请求和服务响应的原理
1.代码
客户端HTML代码:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>title> <script type="text/javascript" src="Ajax.js">script> head><body> <div id="Test" style="background-color:#40eeee"> 您的姓名2:<input type="text" id="testGetName" size="20" /> <button type="button" onclick="testGet();">Ajax Get请求button> div> <div id="Test" style="background-color:#ff6a00"> 您的姓名3:<input type="text" id="testPostName" size="20" /> <button type="button" onclick="testPost();">Ajax Post请求button> div> <div id="myDiv" /> body>html>
客户端JS代码:
var xmlhttp = createRequest(); function testGet() { var fname = document.getElementById("testGetName").value; xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true); xmlhttp.onreadystatechange = callback; xmlhttp.send(null);} function testPost() { var fname = document.getElementById("testPostName").value; xmlhttp.open("POST", "Test.ashx?" + "&random=" + Math.random() , true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); xmlhttp.onreadystatechange = callback; xmlhttp.send("fname="+fname); } function createRequest() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp} function callback() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; }}
这里有一点需要注意
1
|
ajax div 赋值重新渲染_30分钟全面解析图解AJAX原理相关推荐
- ajax div 赋值重新渲染_优化向:单页应用多路由预渲染指南
前言 Ajax 技术的出现,让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容,这就是单页应用.在一个单页应用中,往往只有一个 html 文件,然后根据访问的 url 来匹配对应的路由脚本, ...
- 基于Ajax+div的“左边菜单、右边内容”页面效果实现
效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订 ...
- php赋值给jq,jquery怎么给div赋值
jquery给div赋值的方法:首先创建addtext函数:然后在函数内通过id(mydiv)获取div对象:最后使用text方法给div赋值即可,如[function addtext(){$('#m ...
- div赋值,取值和input赋值,取值
div赋值文本和html代码,取值和input赋值,取值 一.div取值<div id="txtXiaofei" class="txt-panel"> ...
- vue_props div赋值props定义变量 templete获取
vue_props div赋值props定义变量 templete获取 <div id="app"> <add v-bind:btn="h"& ...
- JAVA中.jsp模板文件AJAX异步请求 - 数据渲染问题
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染失败,谁的过失? 后端已经查询出来结果,但是返回的API接口response查看不到对应的信息.(即:后台有,前台没有) 原因分析: 是因为AJ ...
- jquery给div赋值
一.给div赋值 $("#id").html()="test";//或者 $("#id").html("test");j ...
- div内嵌网页ajax,Div里面载入另一个页面的实现(取代框架)(AJax)(转)
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...
- ajax浏览器操作发生异常,解决IE浏览器缓存导致AJAX请求数据异常
IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面 标签里,加上以下声明: 保存后,刷新页面,重新访问即可. 说明:最 ...
最新文章
- IssueVission的命令处理
- android图片gif动画效果,android中类似于gif 实现图片的动画效果
- C#:委托和自定义事件
- ast.literal_eval
- [python] 解决pip install download速度过慢问题 更换豆瓣源
- c语言a 寻路算法,JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
- hbuilder制作简单网页_企业信息化网站+营销服务之电子商务网站制作流程
- 下拉菜单,防鼠标反复触发
- PHP pathinfo() 函数【获取文件后缀】
- 去掉左边0_TiDB 4.0 在 VIPKID 的应用实践
- 安装教程之postman下载及安装
- 3624用计算机怎么换算,pa与mpa的换算(压力单位pa与mpa)
- 正则表达式限制只能输入中文英文数字
- 计算机后台打印机程序,打印机不能正常工作,提示'操作无法完成,后台打印程序服务没有运行'的解决方法...
- Windows_XP SP3 Profession 正版密钥
- iOS 高仿《百思不得姐》
- 采用FPGA开发高清相机sensorISP芯片要点分析
- Python自然语言处理 | 编写结构化程序
- unity开发抽奖系统
- Lesson 2 Thirteen equals one 十三等于一
热门文章
- SAP UI5 Focus related
- how to find the original page containing a given image
- Enterprise search Callstack in runtime
- SAP tcode CMS_SI 里的transaction type
- How is HashMap return type handled to be converted to a json string
- NoSuchBeanDefinitionException - not resolved currently
- 电子计算机的大脑核心是什么,戴君惕《人脑与电脑》初中说明文阅读题及答案...
- the c programming language_C.I. 直接黄4(C.I. 24890)生产工艺。 CAS号 [3051114]
- 400 bad request 原因_煤气柜腐蚀原因及防腐措施
- ubuntu 开启ssh_CS学习笔记 | 22、通过SSH开通通道