Ajax入门总结--jquery实现Ajax
ajax（Asynchronous Javascript And XML）：只刷新局部页面的技术
ajax的工作流程：
- 使用javascript获取到页面上的数据
- 通过Ajax引擎创建XMLHttpRequest对象
- XMLHttpRequest会给服务器发送一个http请求
- 此时服务器进行处理。
- 服务器响应（XML、JSON、HTML）数据给XMLHttpRequest对象
- JavaScript实现对DOM+CSS的局部刷新.
可以看出来核心就是XMLHttpRequest对象，那么咋们来看一下XMLHttpRequest的一些情况：
javaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力！
| 方法名 | 说明 |
| open(method,URL,async) |
建立与服务器的建立 method参数：请求方式(GET(默认)或POST) URL参数：请求地址 async参数：是否使用异步请求(true或false) |
| send(content) |
发送请求： content参数：请求采纳数，只有post请求才能通过send发送参数 |
| setRequestHeader(header,value) | 设置请求头信息 |
| 传统web(from表单)和Ajax的差异 | ||
| 发送请求方式不同 | 传统web | 提交表单方式发送请求 |
| Ajax技术 | 异步引擎对象发送请求 | |
| 服务器相应不同 | 传统web | 响应内容是一个完整的页面 |
| Ajax技术 | 响应内容只是需要的数据 | |
| 客户端处理方式不同 | 传统web | 需等待服务器相应完成并重新加载整个页面后用户才能进行操作 |
| Ajax技术 | 可以动态更新页面中的部分内容用户不需要等待请求的响应 | |
使用Jquery发送ajax请求,以下所有建立在jquery基础之上
在线jquery引入地址：<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
语法：jQuery.ajax([settings])
| 常用属性参数 | |
| 属性名 | 说明 |
| String type | 请求方式(GET(默认)或POST) |
| String url | 发送请求的地址 |
| boolean async | 请求模式，默认为true，异步 |
| Object data或String data | 发送给服务器的数据 |
| String dataType | 返回的数据类型，包括XML、HTML、Script、JSON、JSONP、text(默认) |
| Number timeout | 设置请求超时时间 |
| boolean global | 表示是否触发全局Ajax事件，默认为true |
| 常用函数参数 | |
| 函数名 | 说明 |
| function success（Object result, String str） |
请求成功后调用的函数 参数result:可选，为服务器返回的的数据。 参数str：可选，描述请求类型的字符串。 |
| function error（XMLHttpRequest xhr, String em, Exception e） |
请求失败时被调用的参数 参数xhr：可选。 参数em：可选，错误信息。 参数e：可选，捕获的异常对象。 |
| function beforeSend（XMLHttpRequest xhr） |
发送请求前调用的函数， 参数shr：可选 |
| function complete（XMLHttpRequest xhr, String str） |
请求完成后调用的函数，不论成功与否 参数xhr：可选 参数str：可选，描述请求类型的字符串 |
例子：
html如下：
<div id="login"><label for="username">用户名：</label><input id="username" /><label for="pwd">密码：</label><input type="password" id="pwd" /><input type="button" value="登陆" onclick="doLogin()" /><span id="loginInfo"></span></div>js如下：
function doLogin(){var username=$("#username").val();var pwd=$("#pwd").val();//使用$.ajax()发送ajax请求$.ajax({//type:"post",type:"get",url:"login",async:true,data:{"username":username,"pwd":pwd,},dataType:"text",success:function(data){if(data=="ok"){$("#login").html("欢迎您："+username);}else{$("#loginInfo").html("用户名或密码不正确");$("#loginInfo").css({"font-size":"12px","color":"red"});}},error:function(){$("#loginInfo").html("AJAX请求失败");},beforeSend:function(){$("#loginInfo").html("正在登陆中......");$("#loginInfo").css({"font-size":"12px","color":"red"});}})
}语法：jQuery.post(URL,data,callback)
语法：jQuery.post(URL,callback)
例子：
js如下：
//使用$.post()发送AJAX请求function doLogin2(){var username=$("#username").val();var pwd=$("#pwd").val();$.post("login",{"username":username,"pwd":pwd},function(data){if(data=="ok"){$("#login").html("欢迎您："+username);}else{$("#loginInfo").html("用户名或密码不正确");$("#loginInfo").css({"font-size":"12px","color":"red"});}});} 语法：jQuery.getJSON(url,data可选,success(data,status,xhr)可选)
例子：
html如下：
<input type="button" value="加载本地json信息" onclick="doLoad()" /><h1>本地json信息</h1><div id="info"></div>
</body>js如下：
function doLoad(){alert("正在加载本地json文件");$.getJSON("course.json",function(data){//遍历返回的json数组$.each(data,function(index,course){$("<p>").html(course.id+" "+course.name+" "+course.period).appendTo($("#info"));});})}json文件如下：
[{"id":1001,"name":"小侯同学","period":"5个月"},
{"id":1002,"name":"小爱同学","period":"4个月"},
{"id":1003,"name":"天猫精灵","period":"6个月"}]
语法：$(selector).load(url,data可选,function(response,status,xhr)可选)
load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
例子：
html如下：
<body>
<input type="button" value="加载本地json信息" onclick="doLoad()" /><h1>本地json信息</h1><div id="info"></div>
</body>js如下：
function doLoad(){alert("正在加载本地json文件");$("#info").load("course.html")}语法：$(selector).serialize()
serialize() 方法可以 序列化表单元素，创建 URL 编码文本字符串
例子：
html如下：
<form id="login"><label for="username">用户名：</label><input name="username" /><label for="pwd">密码：</label><input type="password" name="pwd" /><input type="button" value="登陆" onclick="doLogin()" /><span id="loginInfo"></span></form>js如下：
function doLogin(){var params=$("#login").serialize();alert(params);}效果如下：
Ajax入门总结--jquery实现Ajax相关推荐
- 【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数，获取DataTable Json,Asp.net
直接上图=============最后拷贝源码(图片清楚) ====================================================================== ...
- jquery中ajax完整例子get,jq的ajax方法，jquery中ajax完整例子
jq的ajax方法,jquery中ajax完整例子 相较与js异步对象的繁琐,jq的ajax对象结构更加清晰 一:ajax对象简述 ajax(Asynchronous JavaScript and X ...
- Ajax入门笔记（原生Ajax、jQuery、axios、fetch、跨域SONP、CORS）
文章目录 一.基础知识 1.1AJAX简介 1.2 AJAX的特点 1.2.1 AJAX 的优点 1.2.2 AJAX 的缺点 1.3 XML简介 1.4 HTTP简介 1.4.1 请求报文 1.4. ...
- ajax php计数,jQuery+PHP+Ajax动态数字统计展示实例
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: 当前在线: - ...
- java如何构造ajax回调参数,jQuery实现ajax回调函数带入参数的方法示例
本文实例讲述了jQuery实现ajax回调函数带入参数的方法.分享给大家供大家参考,具体如下: 不带参数的写法: function pass(htmlId,auditingFlag){ var url ...
- ajax php 动态,jQuery+PHP+Ajax实现动态数字统计展示功能
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: 当前在线: 然后 ...
- jsp jquery ajax请求,JSP+jquery使用ajax方式调用json的实现方法
本文实例讲述了JSP+jquery使用ajax方式调用json的实现方法.分享给大家供大家参考,具体如下: //test function test(uid) { if(confirm("确 ...
- 调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- jquery ajax实例get,jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: $.get(url, [dat ...
最新文章
- 你准备好持续交付（CD）了吗？
- C++STL之vector的说明及使用
- git显示服务器所有分支,怎么拉取git服务器上面的分支到本机？
- VTK：PolyData之ThresholdPoints
- inotify之文件系统事件监控使用入门
- BIO，NIO，AIO总结（一）
- Python 3.7 即将发布，引入多项新功能！
- Thinkphp3.2邮件发送
- ip tcp udp mpeg4头结构的定义
- 蓝桥杯、PAT、CCF CSP、团体程序设计天梯赛、传智杯、全国高校计算机能力挑战赛、软考等大学生编程比赛/考试介绍
- 网页消息服务器异常联系管理员,服务器故障请与管理员联系
- MySQL外键更新删除设置cascade、set null、restrict、no action的区别
- 悲！企业软件被360误认木马病毒！
- 北京中医药大学计算机应用基础作业,北京中医药大学计算机应用基础第五次.doc...
- c语言进制转换实验报告,c语言_各种进制转换.docx
- 从业4-证券投资基金的监管
- 伟大的淘宝IP库的API接口竟然提示503挂掉了
- MATLAB中断点调试入门到进阶
- uni-app 第三方360加固
- matlab求复数相位角,怎么求复数相位