首先转到示意图：

背景：

1.传统网站在提交表单时需要重新加载整个页面。

2.如果服务器长时间不返回响应，客户端将不会响应，用户体验会很差。

3.服务器返回Response后，浏览器需要加载整个页面，对浏览器的负担很大。

4.浏览器提交表单后，会发送大量数据，造成网络性能问题。

问题：

1.如何改进？

2.什么是2。AJAX？

3.有什么优势？

4.缺点是什么？

首先，什么是AJAX

1.为什么需要AJAX

当需要从服务器获取数据并刷新页面时，如果不使用AJAX，则需要提交整个表单。提交表单时，向服务器发送请求，页面需要等待服务器发送响应才能恢复操作。

2.2的概念。AJAX:

1.AJAX=异步JavaScript和XML。

2.AJAX是一种用于创建快速动态网页的技术。

3.通过在后台与服务器交换少量数据，可以异步更新网页。

4.您可以更新网页的一部分，而无需重新加载整个网页。

3.什么是异步

当前页面向服务器发送请求，当前页面不需要等待服务器的响应来操作网页。发送请求后，当前页面可以继续浏览和操作。

4.什么是本地刷新

有两种方法可以实现部分刷新。

1.重载iframe页面的方法。

这种方法虽然实现了部分刷新，但是是页面重载，所以也会带来性能问题。

第一步。在页面中定义Iframe

iframe id=' index frame ' name=' index ' width=' 1000 ' height=' 800 ' frame border=' 0 ' margin width=' 0 ' marginheight=' 0 '滚动=' yes ' style=' margin-top 3360100 px；'/iframeStep2。设置Iframe的src

var index frame=document . getelementbyid(' index frame ')；index frame . src=' introduction . PHP '；第三步。添加按钮点击事件。单击按钮时，重置iframe的src以刷新Iframe中的页面。Iframe之外的内容不会刷新。

按钮id=' room ' onclick=' index Click(' room ')'单击我！/button function index click(Module key){ var index frame=document . getelementbyid(' index frame ')；if(index frame==null){ index frame=parent . document . getelementbyid(' index frame ')；} var url=' introduction.phpswitch(Modulekey){ case ' introduction ' : URL=' introduction . PHP '；打破；case ' room ' : url=' room.php打破；default : { } } index frame . src=URL；}这样，我们就可以实现一个导航栏的功能：

2.AJAX方式

第一步。JavaScrpit发送异步请求

第二步。服务器查询数据库并返回数据

第三步。服务器返回响应

第四步。客户端根据返回的响应用JavaScript操作DOM。

请看下面的例子：

当我们在DropDownList中切换Item时，JavaScript向服务器发送一个异步请求，服务器返回数据。然后，JavaScript解析数据，拼接一个表，并在页面上显示该表。

二、提交表格的原则

1.密码

客户端代码：

表单id=' form1 '操作=' test。ashx' method=' get '您的姓名1:输入类型=' text ' name=' fname ' size=' 20 '/输入类型=' submit ' name=' submit ' value=' sumbit '/表单服务器代码：

public void process request(HttpContext)上下文{//Delay for(int I=0；I 2；i ) {系统。线程。线程。睡眠(1000)；}//从Requset获取fname的值。形式.使用表单获取请求的键值对的值；前提条件是HTTP请求Content-Type值必须是‘application/x-www-form-URL encoded’或‘multipart/form-data’；字符串fname=上下文；请求[' fname ']；语境。响应。内容类型='文本/纯文本'；//将字符串写入HTTP响应输出流。语境。回应.写(' Hello World ' fname)；}2.将代码部署到IIS

3.打开网站：

http://localhost :8003/test . html

4.输入"杰克逊0714"然后点击Sumbit按钮，页面会重新刷新，显示你好，世界杰克逊0714 '

5.提交形式表单后，页面发送请求和服务端返回响应的流程

6.通过抓包，我们可以得到超文本传送协议头

浏览器发送超文本传送协议给服务端，采取的协议是超文本传送协议协议。

在传输过程中，我们可以看下超文本传送协议头。

三、AJAX提交请求和服务响应的原理

1.代码

客户端超文本标记语言代码：

！DOCTYPE html html lang=' en ' xmlns=' http://www .w3。org/1999/XHTML ' head meta charset=' utf-8 '/title/title脚本类型=' text/JAVAScript ' src=' http : AJax。js '/script/head dy div id=' Test ' style='底色： # 40ee '您的姓名2:输入类型=' text ' id=' testGetName ' size=' 20 '/button类型=' button ' onclick=' TestGet()；Ajax Get请求/button/div div id=' Test ' style='底色： # ff6a 00 '您的姓名3:输入类型=' text ' id=' TestPostName ' size=' 20 '/button类型=' button ' onclick=' TestPost()；阿贾克斯邮报请求/button/div div id=' MyDiv '//body/html客户端射流研究…代码：

var xmlhttp=create request()；函数test get(){ var fname=document。getelementbyid(' test getname ').价值；xmlhttp.open('GET '，' Test.ashx？fname=' fname ' random=' math。random()，true)；xmlhttp.onreadystatechange=回调；xmlhttp。发送(null)；}函数test post(){ var fname=document。getelementbyid('测试帖子名称').价值；xmlhttp.open('POST '，' Test.ashx '？random=' Math.random()，true)；xmlhttp。setrequestheader(' Content-Type '，' application/x-www-form-URL编码；字符集=UTF-8 '；xmlhttp.onreadystatechange=回调；xmlhttp。发送(' fname=' fname ')；}函数create request(){ var xmlhttp；如果(窗口XMLHttpRequest){//IE7，火狐、Chrome、Opera、Safari的代码xmlhttp=new XMlhttprequest()；} else {//IE6的代码，IE5 xmlhttp=新的ActiveX对象('微软.XMLHTTP’)；}返回xmlhttp}函数回调(){ if(xmlhttp。readystate==4 xmlhttp。status==200){ document。getelementbyid(' myDiv ').innerHTML=xmlhttp。responsetext}}这里有一点需要注意

var xmlhttp=create request()；

1.让服务端能够操作这个变量，如果定义成局部变量，则服务端返回反应时，不能对xmlhttp的属性赋值。回调函数要求请求是全局的，才能访问这个变量和它的属性值。

2.定义成全局变量后，可能出现两个请求或多个请求共享同一个请求对象。而这个请求对象只能存放一个回调函数来处理服务器响应。当服务器返回两个请求的反应后，可能会调用后指定的回调函数。所以可能有两个完全不同的服务器响应由同一个回调函数处理，而这可能并不是正确的处理。解决办法是创建两个不同的请求对象。

服务端代码不变。

2.输入"杰克逊0714"然后点击Sumbit按钮，页面不会刷新，在最下面显示你好，世界杰克逊0714 '

3.创建交互式、快速动态网页应用的网页开发技术发送请求和服务端返回响应的流程

4.通过抓包，我们可以得到超文本传送协议头

浏览器发送超文本传送协议给服务端，采取的协议是超文本传送协议协议。

在传输过程中，我们可以看下超文本传送协议标头：

5.AJAX GET和邮政方式区别

创建交互式、快速动态网页应用的网页开发技术发送请求和邮政发送请求的代码如下：

//GET方式函数test get(){ var fname=document。getelementbyid(' test getname ').价值；xmlhttp.open('GET '，' Test.ashx？fname=' fname ' random=' math。random()，true)；xmlhttp.onreadystatechange=回调；xmlhttp。发送(null)；} //POST方式函数testPost(){ var fname=document。getelementbyid(' testPost名称').价值；xmlhttp.open('POST '，' Test.ashx '？random=' Math.random()，true)；xmlhttp。setrequestheader(' Content-Type '，' application/x-www-form-URL编码；字符集=UTF-8 '；xmlhttp.onreadystatechange=回调；xmlhttp。发送(' fname=' fname ')；}四、XMLHttpRequest对象的知识

1.XMLHttpRequest对象的方法

2.XMLHttpRequest对象的属性

五、JQuery实现创建交互式、快速动态网页应用的网页开发技术

下面的代码实现了当DropDownList的项被切换时，getWeeklyCalendar方法被触发，类库方法$。JQuery的ajax用于发送AJAX请求。

客户端JQuery代码

函数getWeeklyCalendar(名称，currentDate，模式){ $。ajax({ type:'POST '，url:'weekProcess.php '，data : ' func=getWeeklyCalendername=' name ' current date=' current date ' mode=' mode，success : function(data){ paintweeklyhandler(data)；} });}在后台成功返回响应后，执行paintWeeklyCandler(数据)方法

后台PHP代码

？Phpbr //定义返回Response的格式为JSON格式头(' content-type : text/JSON ')；Br //引入用户自定义的数据库连接文件包括‘dbconfig . PHP’；Br //引入用户自定义文件include _ once ' session.php/* * Ajax */if(is set($ _ POST[' func '])请求的函数！空($ _ POST[' func ']){ switch($ _ POST[' func ']){ case ' getWeeklyCalender ' : getWeeklyCalender($ _ POST[' name ']，$ _ POST[' currentdata ']，$ _ POST[' mode '])；打破；case ' getWeeklyStatus ' : getWeeklyStatus($ _ POST[' name ']，$ _ POST[' currentdata ']，$ _ POST[' mode '])；打破；case ' getEvents ' : getEvents($ _ POST[' date ']，$ _ POST[' name '])；打破；default: break}}函数getweeklycaller ($ name=' '，$ currentdate=' '，$ mode=' '){//逻辑代码br br br //以JSON格式返回响应echo JSON _ encode(array(' result '=$ daysofweekresultsarray)；}br？不及物动词优势

1.以异步方式与服务器通信，无需重新加载页面和刷新页面

2.按需获取数据，减轻服务器负担

3.让网络应用程序更快地响应用户交互

4.AJAX基于标准化和广泛支持的技术，不需要下载浏览器插件或小程序，但要求客户允许JavaScript在浏览器上执行

5.浏览器内容与服务器代码是分开的。页面的内容全部由JAVAScript控制，服务器负责逻辑校验和从数据库获取数据。

七.不足之处

1.安全问题：暴露服务器的方法，黑客可以用这个来攻击

2.很多JS代码很容易出错

3.Ajax没有刷新重载。因为页面变化没有刷新过载那么明显，很容易给用户带来麻烦。——用户不确定当前数据是新的还是更新的；现有的解决方案有：在相关位置提示、明显设计数据更新区域、数据更新后提示用户等。

4.可能会破坏浏览器后退按钮的正常行为；

5.一些手持设备(如手机、PADs等)的浏览器。)现在不能很好的支持Ajax

八、应用场景

1.过滤数据和处理相关数据的场景

2.添加/删除树节点

3.在列表中添加/删除一行记录

4.切换下拉列表项

5.检查注册用户名的重复名称

九.不适用的情况

1.保存整个页面内容

2.航行

X.摘要

以上就是本文的全部内容，写的很详细。希望对大家学习ajax有帮助。