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(){ /** ...
随机推荐
- (五)Respose 知识点总结 (来自那些年的笔记)
目录 HttpServletResponse简介 向客户机写数据 HttpServletResponse应用 打印中文,让浏览器显示不乱码 : 下载文件 输出随机图片(验证码) 不要缓存 图片的src ...
- php类常量
类常量类常量可以使用define定义,也可用const定义,但是在类的内部,只允许用const定义,类常量不能更新,也不能删除类常量通常是大写的,两个单词之间用下滑线连接,如MY_NATION类常量在 ...
- Python基础 第5章 条件、循环及其他语句(1)
1. print和import 1.1 打印多个参数 可用 + 连接多个字符串,可保证被连接字符串前无空格: 可用sep=“_”,自定义各种分隔符: print("I"," ...
- 1266: gcd和lcm(Java)
WUSTOJ 1266: gcd和lcm 参考 1naive1的博客 Description 已知a,b的最大公约数为x,也即gcd(a,b)=x; a,b的最小公倍数为y,也即lcm(a,b)= ...
- java——数据类型和运算符
强类型语言 Java语言是一门强类型语言.强类型包含两方面的含义:①所有的变量必须先声明.后使用:②指定类型的变量只能接受类型与之匹配的值.强类型语言可以在编译过程中发现源代码的错误,从而保证程序更加 ...
- CSS定位以及z-index属性(层叠性)的详解(转)
https://blog.csdn.net/weixin_41342585/article/details/79484879
- (四)Activiti之流程定义部署之ZIP方式和流程定义查询
一.流程定义部署之ZIP方式 上一章节我们使用classpath的方式加载流程定义文件,这里我们使用ZIP的方式. 1.1 用activiti插件生成bpmn和png图片之后,压缩到一个zip格式的压 ...
- MySQL5.7.28免安装版配置
下载 安装配置 问题及解决方案 一.下载 找到你要的版本点击“looking for the latest GA version?”切换,我这个安装的是5.7.28,然后往下拉: 找到免安装的压缩包: ...
- 如何在Web应用里消费SAP Leonardo的机器学习API
去年5月的时候,Jerry曾经写了一篇文章:使用Java程序消费SAP Leonardo的机器学习API,而最近另外做的一个项目,需要在Web应用里做同样的事情. 因为有了前一篇文章的铺垫,避免了很多 ...
- Spring中Bean的管理问题
首先,配置文件中定义的bean并不是都在启动时实例化. <bean id="accountService" class="com.foo.DefaultAccoun ...