jquery与ajax的引用

ゞ浴缸里的玫瑰 2022-09-28 11:42 233阅读 0赞

Ajax的优势：不需要插件支持。优秀的用户体验。提供web程序性能。减轻服务器和带宽负担。

Ajax的不足：浏览器对XMLHttpRequest的支持不足。破坏浏览器的前进后退功能。对搜索引擎的支持不足。开发和调试工具的缺乏。

js的Ajax例子：

function  ajax(){
       var xmlHttpReq=null;
       if(window.ActiveXObject){
           xmlHttpReq=new Active XObject("Microsoft.XMLHTTP");
        }else if(window.XmlHttpRequest){
           xmlHttpReq=new XmlHttpRequest();
       }
       xmlHttpReq.open("GET","url',true);
       xmlHttpReq.send(null);
       if(xmlHttpReq.readyState==4){
          if(xmlHttpReq.state==200){
              alert(xmlHttpReq.responseText());
          }
       }
    }

jQuery中的Ajax例子

1.load()

1.1载入html文档

load(url\[,data\]\[,callback\])

url：请求html页面的url地址

data:可选，发送到服务器额key/value数据

callback：可选，请求完成时的回调函数，无论请求成功失败

<div id="text"></div>
    
    $("#text").load("test.html")//加载test.html页面，加载并插入到div中

1.2筛选载入的html文档

url==url selector，可以用选择起来选择载入的内容

$("#text").load("test.html  .hello")//载入test.html中class为hello的的内容

1.3传递方式

没有data就是get，有data就是post  
1.4回调函数

function(responseText，textStatus，XMLHttpRequest)\{

//responseText:请求返回的内容

//textStatus:请求状态，success,error,timeout,notmodified4种

//XmlHttpRequest：XMLHttpRequest对象。

\}

2.$.get()和$.post()

2.1$.get()

$.get(url\[,data\]\[callback\]\[,type\])

url：请求地址

data：可选，发送到服务器的数据，会做为QueryString附加到请求url中

callback:可选，载入成功是执行的函数

type:可选，服务器返回的内容格式，xml，json，html。

回调函数：

function(data,textStatus)\{

//data:返回的数据

//textStatus：4种状态

\}

2.2$.post

和$.get的区别：

1.GET请求见参数附加在url后进行传输，POST请求则是作为HTTP消息的实体内容发送给服务器，Ajax中对用户不可见

2.GET请求对数据有大小限制，POST方式传递方式要大的多

3.GET方式请求的数据会被浏览器缓存起来，用户浏览历史记录中可以读到数据，所以会有安全问题。

3.$.getScript()和$.getJson()

$.getScript()不用全部加载所有的js文件，有些文件用到时在加载就行了

$.getScript("../js/hello.js",function(){
    
    })

$.getJson()用来加载json文件

$.getJson("text.json",function(data){
    
    })

4.$.ajax()

$.ajax(options)只有一个参数

内容为：

1.url:请求地址，默认当前页地址

2.type:请求方式，默认get

2.timeout:设置超时时间，会覆盖$.ajaxSetup()中的配置

3.data:发送给服务端的数据，

4.dataType:预期服务器返回的数据类型，jsonp格式：xxx?callback=?时，jquery会替换最后一个？为正确的函数名，用来执行回调函数。

5.beforeSend:发送请求是可以修改XMLHttpRequest对象的函数。返回false可以取消请求。

6.complete:请求完成后调用的函数，不管成功失败。

7.success:请求成功后调用的函数，data和textStatus

8.errot：请求失败后调用的函数，XMLHttpRequest,textStatus,errorThrown

9.global:默认为true,是否触发全局Ajax事件

$.ajax({
       url:"/xxx",
       type:"get",
       data:{},
       success:function(data){
    
       }
    })

序列化元素

1.serialize()

如果表单数据多，可以使用$("\#form").serialize()，会把值变为字符串格式。会自动编码。

2.serializeArray()

不是返回数组，而是返回json数据

3.$.param()

用来将一个数组和对象按照key/value序列化

全局事件

ajax开始时会触发ajaxStart(function()\{\}),

结束时会触发ajaxStop(function()\{\})。

ajaxComplete(callBack)：完成时执行

ajaxError(callback):ajax错误时执行

ajaxSend(callback)：ajax发送请执行

ajaxSuccess(callback):ajax成功时执行

无论定义在哪里，只要有ajax请求就会执行。

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery ajax ajax()

-------------------- jquery ajax ajax() 应用：ajax()是jquery ajax底层实现，其他的ajax提交方式都可以通

浅浅的花香味﹌/ 2023年03月04日 08:21/ 0 赞/ 39 阅读

相关 jquery与ajax的引用

Ajax的优势：不需要插件支持。优秀的用户体验。提供web程序性能。减轻服务器和带宽负担。 Ajax的不足：浏览器对XMLHttpRequest的支持不足。破坏浏览器的前进后

ゞ浴缸里的玫瑰/ 2022年09月28日 11:42/ 0 赞/ 234 阅读

相关 jquery的引用

jsp引用jquery <script type="text/javascript" src="$\{pageContext.request.contextPath

ゞ浴缸里的玫瑰/ 2022年09月27日 12:30/ 0 赞/ 314 阅读

相关 JavaScript、Ajax与jQuery的关系

> > > > 一、简要概括： > > （1）JS是一种用于Web客户端开发的脚本语言。 > > （2）Ajax是一种编程技术，主要用途是提供

Dear 丶/ 2022年09月27日 03:59/ 0 赞/ 233 阅读

相关 JQuery的AJAX的同步与异步

JQuery的ajax方法控制同步和异步的参数是async，默认为true即异步，false则为同步，同步使用如下： $.ajax({ url: "",

雨点打透心脏的1/2处/ 2022年09月25日 14:23/ 0 赞/ 188 阅读

相关 jQuery与ajax

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <T

迷南。/ 2022年08月07日 08:52/ 0 赞/ 152 阅读

相关 js原生ajax与jquery的ajax的用法区别

什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术。通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据 XMLH

刺骨的言语ヽ痛彻心扉/ 2022年07月16日 06:09/ 0 赞/ 233 阅读

相关 js原生ajax与jquery的ajax用法对比

js原生ajax与jquery的ajax用法对比一、Ajax概述 AJAX（AsynchronousJavascript And XML）翻译成中文就是“

ゝ一纸荒年。/ 2022年05月28日 12:58/ 0 赞/ 266 阅读

相关 Dom与Jquery的ajax

Dom与jquery互相转换 DOM是文档对象模型（Document Object Model，简称DOM） jQuery是一个JavaScript 库，极大地简化了

﹏ヽ暗。殇╰゛Y/ 2022年04月27日 16:20/ 0 赞/ 208 阅读

相关原生ajax请求与jquery-ajax请求

ajax请求可以在不刷新页面的情况下，请求后台服务器为了演示的效果，在jsp中添加一段视频，再播放视频的时候请求后台，看效果。普通表单提交返回数据，会刷新页面使

约定不等于承诺〃/ 2022年02月04日 08:29/ 0 赞/ 448 阅读