关于原生AJAX和jQueryAJAX的编程
1.回顾传统Ajax开发步骤
1 ①:创建xmlHttpRequest对象 2 var xmlHttp = creatHttpRequest(); 3 ②:绑定回调函数 4 xmlHttp.onreadystatechange = function(){……} 5 ③:建立连接 6 xmlHttp.open(“GET”,”url”); 7 ④:发送数据 8 xmlHttp.send(null) //GET请求 9 如果是POST请求需要设置编码格式: 10 xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); 11 xmlHttp.send(“key=value?key=value”) 12 ⑤:书写回调函数 13 if(readyState == 4){ 14 if(status ==200){ 15 …… 16 //操作xmlHttp.responseText主要针对返回HTML片段和json 17 //操作xmlHttp.responseXML主要针对返回XML片段。 18 } 19 }
2.jQuery的Ajax开发
jQuery提供了最底层的Ajax调用方法:$.ajax
1 $.ajax{ 2 type:”POST” 3 url: “some.php” 4 data: "name=John&location=Boston", 5 success: function(msg){ 6 alert( "Data Saved: " + msg ); 7 } 8 }
// 因为使用比较繁琐,所以在实际开发中,应用很少
为了简化Ajax开发,jQuery提供了对$.ajax()进一步的封装方法$load、$get、$post。这三个方法不支持跨域,$getJSON、$getScript支持跨域。
①:load方法
load方法是jQuery中最为简单和常用的Ajax方法,处理HTML片段此方法最为合适。
语法
$("jquery对象").load("url","data") ;
url:Ajax访问服务器地址
data:请求参数
返回内容HTML片段 ,自动放入$("jquery对象")innerHTML 中(如果返回的数据需要处理,我们可以使用get或者post)
load()方法的传递参数根据参数data来自动自定。如过没有参数的传递,采用GET方式传递,否则采用POST方式
练习一:校验用户名是否存在
此练习在第五章的第三小节有实现代码,这里使用jQuery的方式进行简要的列出核心代码:
$(function(){
// 为用户名添加离焦事件
$("input[name='username']").blur(function(){
// 获得当前输入 username
var username = $(this).val();
// 提交Ajax校验
$("#info").load("/Ajax/checkUsername" , {'username': username});
});
});
<form>
<!-- div display:block 自动换行效果 span display:inline; 不会换行 -->
用户名 <input type="text" name="username" /> <span id="info"></span> <br/>
密码 <input type="password" name="password"/><br/>
<input type="submit" value="注册" />
</form>
②:get方法和post方法
语法 :
$.get/$.post("url","parameter",function(data){...});
url Ajax访问服务器地址
parameter 代表请求参数
function 回调函数 data 代表从服务器返回数据内容
这里data代表各种数据内容 : HTML片段、JSON、XML
如果传递参数给服务器使用 $.post , 不需要传参数 可以使用 $.get
转载于:https://www.cnblogs.com/DreamDrive/p/4093809.html
关于原生AJAX和jQueryAJAX的编程相关推荐
- 原生ajax XMLHTTPRequest()
原生ajax XMLHTTPRequest() 视频 https://www.bilibili.com/video/BV1WC4y1b78y?p=10 代码 <!DOCTYPE html> ...
- ajax不执行_好程序员Java学习路线分享原生Ajax的使用
好程序员Java学习路线分享原生Ajax的使用,首先我们先来看一下什么是 AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 就是 异步.JavaScript ...
- 新瓶旧酒ASP.NET AJAX(6) - 客户端脚本编程
[索引页] [×××] 新瓶旧酒ASP.NET AJAX(6) - 客户端脚本编程(Sys.WebForms命名空间下的类Sys.Serialization命名空间下的类) 作者:webabcd 介绍 ...
- java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
- 对原生ajax的理解
$.ajax({url:'',//请求文件路径type:'',//请求方式GET POSTdata:{},//要发给服务器的数据参数dataType:'',//希望接口返回的数据格式json,stri ...
- 原生ajax请求及readyState的几种状态
原生ajax请求写法: var http = new XMLHttpRequest();http.open('get','./package.json');http.onreadystatechang ...
- 原生ajax如何执行,原生ajax调用数据实例讲解
由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的aja ...
- .ajax get 写法,原生Ajax写法(GET)
ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...
- Django学习---原生ajax
Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...
最新文章
- 编程打开Windows服务控制管理器
- 让数据中心变得更加友好
- pyqt5快速开发与实战_用云开发快速制作客户业务需求收集小程序丨实战
- 【Vue2.0】—vue-router(二十六)
- ug建模文本怎么竖着_UG软件见解分析一二,设计必备软件,UG新手福音
- vmcore经典案例(hardlockup、softlockup、读写锁、hung、oom)
- SPSS统计术语与思维【SPSS 002期】
- 智能网关路灯杆智慧照明解决方案
- zoom下载官网android最新,Zoom下载安卓最新版_手机app官方版免费安装下载_豌豆荚...
- Windows文件保护简介
- Python基础教程--【2022暑假全新总结】
- RK987蓝牙键盘使用说明书分享
- 简单 黑苹果dsdt教程_[黑苹果入门]关于DSDT的入门知识
- 【教学类-30-02】10以内加法题不重复(一页两份)(包括6以内、7以内、8以内、9以内、10以内加法题 只抽取25个)
- FAST-LIO2代码解析(五)
- 简易计算机课程设计总结,简单计算器课程设计报告.doc
- python1到100求和编程递归_编写一个递归函数计算从1加到100的和
- linux下开机自动启动,定时运行shell脚本
- 前端 CSS : 1# 纯 CSS 实现万圣节 toggle 控件
- mysql_性能优化一(慢查询分析)
热门文章
- 6-2 多项式求值 (15 分)
- 7-1 水文数据校验及处理 (50 分)
- 计算机控制炉温实验,计算机控制(炉温控制)实验报告-20210412070439.docx-原创力文档...
- 中国量子计算机领先美国吗,好消息!中国又一项技术领先全球,美国院士:这是划时代的成果...
- SpringData_Repository接口概述
- 机器学习实战(Machine Learning in Action)学习笔记————06.k-均值聚类算法(kMeans)学习笔记...
- 【机器学习课程笔记(吴恩达)】1.2 什么是机器学习?
- [转]把人当成一个公司来经营,心就不会那么累
- mysql 8.0 java连接报错:Unknown system variable 'query_cache_size'
- OC 观察者模式(通知中心,KVO)