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(){ /** ...
随机推荐
- 利用Python进行数据分析_Pandas_汇总和计算描述统计
申明:本系列文章是自己在学习<利用Python进行数据分析>这本书的过程中,为了方便后期自己巩固知识而整理. In [1]: import numpy as np In [2]: impo ...
- (十四)SpringBoot之事务处理
一.简介 ssh ssm都有事务管理service层通过applicationContext.xml配置,所有service方法都加上事务操作: 用来保证一致性,即service方法里的多个dao操作 ...
- UnityC#中修改RectTransform
1.改变RectTransform的Left和Buttom GetComponent<RectTransform>().offsetMax = new Vector2(left, top) ...
- Citrix ADC 12.1 / NetScaler 12
Citrix ADC 12.1 / NetScaler 12 参考 https://www.carlstalhood.com/netscaler-menu/netscaler-12/ Core – C ...
- es6中Array.from()
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组. 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象. 1.将类数组对象转换为真正数 ...
- printPreviewControl1怎么刷新文档
printPreviewControl1.InvalidatePreview(); 调用printPreviewControl1控件的 InvalidatePreview() 这个方法即可.
- weblogic快速安装版的安装和使用
weblogic 12c提供了一个225MB大小的zip包, 我们下载下来之后解压后, 到jdk的bin目录下面, 执行java -jar ORACLE_HOME=[webloigc安装jar包绝对路 ...
- CentOS linux7 设置开机启动服务
常用命令 描述 旧命令 新命令 使服务自动启动 chkconfig --level 3 http on syste ...
- 【问题】No manual entry for pthread_create in section 3
参考文章:https://blog.csdn.net/wwwlyj123321/article/details/79211184 apt-get install manpages-posix manp ...
- 特殊权限 - SUID GUID STICKYBIT
◆ SUID ( Set User ID ) Linux里,用户的ID被称作UID.在实际生产中,可能需要临时借用别的用户执行程序,因此需要能够临时变更自己UID的机能叫做SUID.借助SUID权限, ...