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(){ /** ...
随机推荐
- logback的xml配置文件模板(超详细)
<?xml version="1.0" encoding="UTF-8" ?> <!-- 在此未说明属性为非必须的,那就表示属性必须设置 -- ...
- ElasticSearch入门-基本概念介绍以及安装
Elasticsearch基本概念 Elasticsearch是基于Lucene的全文检索库,本质也是存储数据,很多概念与传统关系型数据库类似. 传统关系型数据库与Elasticsearch进行概念对 ...
- 记录学习Python的第一天
这是我的第一篇博客,也是我学Python的第一天. 写这篇博客主要目的是为了记下我学习Python的过程以及所学到的知识点.我所学的是Python3版本,我所学的内容有如下几点: 1.python3中 ...
- 学界 | 华为诺亚方舟实验室提出新型元学习法 Meta-SGD ,在回归与分类任务中表现超群
学界 | 华为诺亚方舟实验室提出新型元学习法 Meta-SGD ,在回归与分类任务中表现超群 机器之心发表于机器之心订阅 499 广告关闭 11.11 智慧上云 云服务器企业新用户优先购,享双11同等 ...
- (十)easyUI之折叠面板+选项卡+树完成系统布局
一.效果 二 .编码 数据库设计 数据库函数设计,该函数根据父节点id 查询出所有字节点(包括孙子节点) BEGIN #声明两个临时变量 ); ); '; SET tempChd=CAST(rootI ...
- 通俗化理解Spring3 IoC的原理和主要组件
♣什么是IoC? ♣通俗化理解IoC原理 ♣IoC好处 ♣工厂模式 ♣IoC的主要组件 ♣IoC的应用实例 ♣附:实例代码 1.什么是IoC(控制反转)? Spring3框架的核心是实现控制反转( ...
- WebSocket协议探究(一)
一 复习和目标 1 复习 上一节使用wireshark抓包分析了WebSocket流量 包含连接的建立:HTTP协议升级WebSocket协议 使用建立完成的WebSocket协议发送数据 2 目标 ...
- MiniUI学习笔记一【转】
MiniUI Api文档:http://miniui.com/docs/api/index.html 1.取组件值 传递form data,load发送 请求加载数据 <script type= ...
- Python练习_集合和深浅拷贝_day7
1. 1.作业 1.把列表中所有姓周的人的信息删掉(升级题:此题有坑, 请慎重): lst = ['周老二', '周星星', '麻花藤', '周扒皮'] 结果: lst = ['麻花藤'] 2.车牌区 ...
- Python笔记-备忘
一.向列表添加元素 x.append(y) #末尾添加一个元素 x.extend([y,z]) #末尾添加多个元素 x.insert(index,y) 二.向列表获取元素 x[index] 三.从列表 ...