JQuery实践--Ajax
- Ajax概览
无需刷新用户页面而发起服务器请求的技术。
创建一个XHR实例:
var xhr
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
}
else if (window.ActiveXObject){
xhr = new ActiveXObject("Msxml12.XMLHTTP")
}
else{
throw new Error("Ajax is not support")
}XHR实例 方法和属性
abort() 导致当前正在执行的请求被取消 getAllResponseHeaders() 返回一个字符串。包含所有响应标头的名称和值 getResponseHeader(name) 返回指定的响应头的值 open(method,url,async,username,password) 设置请求的方法和目标URL send(content) 发起带有指定的体内容的请求 setRequestHeader(name,value) 设置请求头 onreadystatechange 请求的状态发生变化时所使用的事件处理函数 readystate 请求的状态:
0:未初始化
1:正在加载
2:已加载
3:交互
4:完成responseText 响应返回的体内容 responseXML xml格式时,根据体内容创建的XML DOM status 服务器返回的响应状态码。200,404. statusText 响应返回的状态文本消息 发起请求前: xhr.open('GET',url)
设置通报进展处理函数:xhr.onreadystatechange = function(){xhr.readystate
发起请求:xhr.send(null)==》POST请求的话,需要设置请求体:‘a=1&b=2’
获得响应: xhr.responseText - 从服务器加载预格式化的HTML
Ajax最为常见的用途之一就是从服务器获取一大块的内容并填充到DOM里某个战略位置上。
向指定的URL发起ajax请求,响应文本替换所有已匹配元素的内容 laod(url,parapaters,callback) 字符串,服务器url
paramaters:对象,省略为GET,指定为POST。属性被序列化为请求参数
cb:响应数据被加载到包装集元素之后被调用
参数: 响应文本,状态码,XHR实例包装集 如果想要发送带参数的GET,参数作为查询字符包含在URL中
对作为响应而返回的元素进行筛选。 通过在URL添加空格和# 作为后缀来完成。
$(',injectMe').load('/someResouce #div')把包装集里所有的成功表单元素,创建正确格式化的,经过URI编码的查询字符串 serialize() 已格式化的字符串 只包含成功的表单元素:未选中的复选框,单选按钮,未选择的下拉列表,已禁用的 都不包含 以javascript数组形式获取表单数据 serializeArray() 表单数据的数组
[{name:value},...]发送GET请求 (实用工具函数) $.get(url,paramaters,callback) paramaters:查询参数
请求完成时被调用。参数:响应体,响应状态XHR实例 获取JSON数据GET请求 (实用工具函数) $.getJSON(url,paramaters,callback) 响应体解析为JSON字符串作为回调第一个参数 XHR实例 发生POST命名 (实用工具函数) $.post(url,paramaters,cb) cb:参数:响应体,状态码 XHR实例 利用已传递的选项,来发起Ajax请求 $.ajax(options) options 参数:
url: 请求URL
type: 字符串: POST, GET ==>default
data: 对象,属性作为查询参数而传递给请求
dataType:字符串,标识预期将被响应返回的数据类型: xml,html,json,jsonp,script,text
timeout:超时时间,毫秒
global: bool. 启用或禁用所谓全局函数触发.这些函数可以附加到元素上,并且在Ajax调用的不同时刻或状态下触发。
contentType: 字符串 。将要在请求上指定的内容类型。default:application/x-www-form-urlencoded
success:函数 如果请求的响应指示成功状态码,则这个函数被调用。
参数:响应体 (格式为dataType),状态码(成功状态)
error: 函数: 参数:XHR实例,状态消息字符串,XHR实例返回的异常对象complete: 函数。请求完成时,调用.
参数:XHR实例和状态消息字符串
beforeSend: 函数. 发起请求之前被调用。
参数:XHR实例。可以在这里设置标头和预请求操作
asyn: bool。 同步还是异步
processData: bool. false:阻止已传递数据被加工为URL编码格式.默认为true
ifModified: bool. true: 自从上一次请求以来,只有在响应内容没有改变的情况下 (Last-Modified标头)才允许请求成功。省略则不执行标头检查XHR实例 设置一组默认的Ajax属性,为后续$.ajax调用 $.ajaxSetup(properties) 定义一组默认的Ajax属性
设置的属性不会英语到 load命令上
$.get和¥。post 还是发送各自的get 或post请求 - 发起通用的GET和POST
$.get,$.post - 发起带有细化控制的请求
$.ajax - 设置默认的Ajax属性
$.ajaxSetup - 全局函数
jQuery允许我们把函数附加到特定的DOM元素,这些函数在ajax请求处理的不同阶段或在请求最终成功或失败时将被触发。
$('selector').ajaxError(reportError)
当这个或任何其他全局函数被调用时,传递给回调函数的第一个参数由Javascript的Object实例构成:
属性:
1。 type:全局函数的类型的字符串:e.g ajaxError
2. target: DOM元素的引用
这个构造称为全局回调信息对象:一些全局函数类型被传递附加参数,这个共同的第一个参数可以用来标识什么全局函数类型触发了回调函数以及全局函数被附加到哪一个元素上。
这些全局回调函数的每一个都在Ajax请求的处理期间的特性时刻被调用
ajaxStart(cb) 参数:ajaxStart的全局回调信息对象 Ajax函数或命令发起时,但在XHR实例被创建前 ajaxSend(cb) 参数: ajaxSend的全局回调信息对象,XHR实例,$.ajax()函数使用的属性 XHR实例被创建后,但在XHR实例被发送给服务器之前 ajaxSuccess(cb) 参数:ajaxSuccess的全局回调信息对象,XHR实例,$.ajax()函数使用的属性 在请求已从服务器返回之后,并且响应包含成功状态码 ajaxError(cb) 参数:ajaxError的全局回调信息对象,XHR实例,$.ajax()函数使用的属性,被XHR实例返回的异常对象 在请求已从服务器返回之后,并且响应包含失败状态码 ajaxComplete(cb) 参数:ajaxComplete的全局回调信息对象,XHR实例,$.ajax()函数使用的属性 在请求已从服务器返回之后,并且在任何已声明的ajaxSuccess或ajaxError回调函数已被调用之后 ajaxStop(cb) 参数:ajaxStop的全局回调信息对象, 所有其他Ajax处理完成一件任何其他使用的全局回调函数已被调用之后
JQuery实践--Ajax的更多相关文章
- JQuery和Ajax在ASP.NET MVC中的基本应用
当我们在开发Web应用程序中使用JQuery和Ajax异步调用来实现很多功能时,不仅提高了程序的性能,而且给用户一个更好的交互式界面操作体验.接下来我们依旧用简单的实例来学习下它们的应用. 创建一个A ...
- Asp.net中JQuery、ajax调用后台方法总结
通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...
- jQuery的ajax的post请求json格式无法上传空数组
问题描述:在和后端对接时,使用jquery的ajax的post方式向后端传递一序列约定好格式的对象数组.遇到了一个现象:如果对象中的数组是空数组,那么在请求参数中是不会出现的. 以下是数据的对比: ...
- Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...
- Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- javascript、jquery、AJAX总结 标签: javascriptjqueryajax 2016-01-23 10:25 2415人阅读
其实在学习之前,就已经用上了js,jquery和ajax,不过当时不清楚这些的区别,就全都当成js来看,然后别人一说jquery,ajax都觉得好像很高级,等到自己学习的时候,倒是对这些更清楚了一点, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 【原创经验分享】JQuery(Ajax)调用WCF服务
最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...
- jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...
随机推荐
- Kubernetes对Pod调度指定Node以及Node的Taint 和 Toleration
由于博客园不支持markdown,推荐以下url阅读: 原创url:https://blog.csdn.net/weixin_42495873/article/details/103364868 ## ...
- 位、字,字节与KB的关系?
位:我们常说的bit,位就是传说中提到的计算机中的最小数据单位:说白了就是0或者1:计算机内存中的存储都是01这两个东西. 字节:英文单词:(byte),byte是存储空间的基本计量单位.1byte ...
- S03_CH05_AXI_DMA_HDMI图像输出
S03_CH05_AXI_DMA_HDMI图像输出 5.1概述 本课程是在前面课程基础上添加HDMI IP 实现HDMI视频图像的输出.本课程出了多了HDMI输出接口,其他内容和<S03_CH0 ...
- WPF入门(4)——资源
引用<深入浅出WPF>对资源的解读: 每个WPF的界面元素都具有一个名为Resources的属性,这个属性继承自FrameworkElement类,其类型为ResourceDictiona ...
- 【Scratch】它跟Mindstorms,有什么区别?
第197篇文章 老丁的课程 在正式开始这套课程之前,依照老丁的习惯,还是要给大家白话下东西,该怎么学? 本节课,来讲讲我对于学习这个软件(包括和EV3配合起来)的一些看法.同时,也给小朋友们一些编程学 ...
- 【转载】SpringBoot yml 配置
1. 在 spring boot 中,有两种配置文件,一种是application.properties,另一种是application.yml,两种都可以配置spring boot 项目中的一些变量 ...
- Java数据结构Vetor
Java数据结构Vector /** * <html> * <body> * <P> Copyright JasonInternational</p> ...
- Struts标签<s:if>判断字符串是否包含一个固定的值
Struts标签<s:if>判断字符串是否包含一个固定的值:1.如果比较对象是字符串: <s:if test="str.contains('判断是否包含的字符串')&quo ...
- 抓某音乐播放器时现在多了个vkey,导致播放地址有问题,如何抓到vkey
一:在已经通过axios和vue-cli本地服express通过地址获取到songmid这个参数 在js里面地址和参数如下: // 获取歌手和歌曲的详细信息 export function getSi ...
- JavaScript--常用对象的属性及方法(1)
1.Number对象(基本数据类型) Number对象的方法大多是一些强制转换方法,如果转换失败返回NaN,以下举例中用number来代替具体数字: *console.log在控制台输出(键盘F12可 ...