Ajax笔记内容一
Ajax的出现是因为什么原因。
Ajax与WEB的区别在哪里
Ajax的全文名称
Ajax的工作原理与后端的MVC有什么关系
Ajax包含的那些技术
Ajax的优势与不足
Ajax的同步请求与异步请求
Ajax中的语法
jquery中的Ajax
Ajax中的三种数据格式
ajax 全名 asynchronous javascript and XML(异步ajax 全名 asynchronous javascript and XML(异步
JavaScript和XML)JavaScript和XML)
出现问题的原因:前端页面要想获取后台的信息需要刷出现问题的原因:前端页面要想获取后台的信息需要刷
新整个页面,这给用户带来不好的体验。新整个页面,这给用户带来不好的体验。
第一点:Ajax的核心是JavaScript的XMLHttpRequest对第一点:Ajax的核心是JavaScript的XMLHttpRequest对
象。象。
请看下面的的图。请看下面的的图。
Javascript XHTML CSS XML XMLHttpRequestJavascript XHTML CSS XML XMLHttpRequest
优势:异步模式的刷新提高用户体验,优化了浏览器和优势:异步模式的刷新提高用户体验,优化了浏览器和
服务器,Ajax引擎在客户端运行,使服务器的压力少些。服务器,Ajax引擎在客户端运行,使服务器的压力少些。
同步请求:同步请求是指当前发出请求后,浏览器什么同步请求:同步请求是指当前发出请求后,浏览器什么
都不能做,都不能做,
必须得等到请求完成返回数据之后,才会执行后续的代 必须得等到请求完成返回数据之后,才会执行后续的代
码,码,
相当于生活中的排队,必须等待前一个人完成自己的事 相当于生活中的排队,必须等待前一个人完成自己的事
物,后一个人才能接着办。物,后一个人才能接着办。
也就是说,当JS代码加载到当前AJAX的时候会把页面里 也就是说,当JS代码加载到当前AJAX的时候会把页面里
所有的代码停止加载,页面处于一个假死状态,所有的代码停止加载,页面处于一个假死状态,
当这个AJAX执行完毕后才会继续运行其他代码页面解除 当这个AJAX执行完毕后才会继续运行其他代码页面解除
假死状态假死状态
第一点:JavaScript的入口函数是什么?第一点:JavaScript的入口函数是什么?
HTML XML JSON HTML XML JSON
作用:不需要考虑浏览器的问题,代码能大大的改善。作用:不需要考虑浏览器的问题,代码能大大的改善。
第二点 jquery的入口函数是什么?第二点 jquery的入口函数是什么?
解决问题的方案就是。利用Ajax技术,这项技术能使浏览解决问题的方案就是。利用Ajax技术,这项技术能使浏览
器与服务器通信。不需要刷新整个页面。器与服务器通信。不需要刷新整个页面。
第二点:回顾Servlect中的Resquest对象的定义:第二点:回顾Servlect中的Resquest对象的定义:
HttpServletRequest对象:HttpServlet调用HttpResponseHttpServletRequest对象:HttpServlet调用HttpResponse
的有关方法,生成响应数据,用于服务器上接收浏览器发的有关方法,生成响应数据,用于服务器上接收浏览器发
送过来的数据信息。送过来的数据信息。
第三点:以用户提交表单为例第三点:以用户提交表单为例
WEB:用户单机了提交按钮,整个页面胡刷新。WEB:用户单机了提交按钮,整个页面胡刷新。
Ajax:数据在客户端与服务器之间独立运输数据,服务Ajax:数据在客户端与服务器之间独立运输数据,服务
器不会返回整个页面器不会返回整个页面
MVC:MVC:
AJax:AJax:
不足:Ajax不支持浏览器的前进后退,有安全隐患,对不足:Ajax不支持浏览器的前进后退,有安全隐患,对
索引引擎支持力度不够,不易调试。索引引擎支持力度不够,不易调试。
异步请求:默认异步:异步请求就当发出请求的同时,异步请求:默认异步:异步请求就当发出请求的同时,
浏览器可以继续做任何事,浏览器可以继续做任何事,
Ajax发送请求并不会影响页面的加载与用户的操作,相Ajax发送请求并不会影响页面的加载与用户的操作,相
当于是在两条线上,各走各的,互不影响。当于是在两条线上,各走各的,互不影响。
一般默认值为true,异步。异步请求可以完全不影响用户一般默认值为true,异步。异步请求可以完全不影响用户
的体验效果,的体验效果,
无论请求的时间长或者短,用户都在专心的操作页面的无论请求的时间长或者短,用户都在专心的操作页面的
其他内容,并不会有等待的感觉。其他内容,并不会有等待的感觉。
<script>window.onload = function () {<script>window.onload = function () {
//js的入口函数 //js的入口函数
}</scriptt> }</scriptt>
<script><script>
<!--方案一--> <!--方案一-->
$(document).click(function () { $(document).click(function () {
alert("这是我的第一个入口函数名为jquery函数入 alert("这是我的第一个入口函数名为jquery函数入
口");口");
}); });
/*方案二*/ /*方案二*/
$(function () { $(function () {
alert("这是我的jquery第二种方案"); alert("这是我的jquery第二种方案");
}) })
</script></script>
第三点Ajax的语法:<script>jquery.ajax([settings]) 其中第三点Ajax的语法:<script>jquery.ajax([settings]) 其中
setting为参数setting为参数
第四点代码实战第四点代码实战
<script type="text/javascript"><script type="text/javascript">
/*jquery中的Ajax*/ /*jquery中的Ajax*/
/*Ajax的格式 /*Ajax的格式
* <script> jquery的语法中.Ajax的语法< / script>*/ * <script> jquery的语法中.Ajax的语法< / script>*/
//jquery的语法 $("#Button1").click(function () {} //jquery的语法 $("#Button1").click(function () {}
// $.ajax({type:"GET"}) }); // $.ajax({type:"GET"}) });
//Jquery的入口函数 //Jquery的入口函数
/*案例写法如下*/ /*案例写法如下*/
$(function () { $(function () {
$("#Button1").click(function () { $("#Button1").click(function () {
//打开已获取返回数据文件 //打开已获取返回数据文件
//$.getScript("UserInfo.js") //$.getScript("UserInfo.js")
//Ajax的语法 //Ajax的语法
$.ajax({ $.ajax({
//请求方式GET or post 默认为get请求 //请求方式GET or post 默认为get请求
type:"GET", type:"GET",
//跳转文件的1地址 //跳转文件的1地址
URL:"test.js", URL:"test.js",
//预计服务器数据类型 //预计服务器数据类型
dataType:"script",//格式为script dataType:"script",//格式为script
dataType:"xml",//格式为xml dataType:"xml",//格式为xml
dataType:"html",//格式为html dataType:"html",//格式为html
dataType:"json",//json dataType:"json",//json
dataType:"jsonp",//jsonp dataType:"jsonp",//jsonp
//发送的数据格式的数据类型。 //发送的数据格式的数据类型。
data :{ data :{
"name" :$("#userName").val(), "name" :$("#userName").val(),
"location":$("#address").val() "location":$("#address").val()
}, },
//默认为true为异步请求 FALSE的为同步请 //默认为true为异步请求 FALSE的为同步请
求求
async :false, async :false,
//默认为true //默认为true
//设置为FALSE 将不会从浏览器缓存中加载 //设置为FALSE 将不会从浏览器缓存中加载
信息信息
cache:false, cache:false,
success :function (msg) { success :function (msg) {
alert(msg); alert(msg);
} }
}); });
}); });
}); });
</script></script>