关于原生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 


本文转自SummerChill博客园博客,原文链接:http://www.cnblogs.com/DreamDrive/p/4093809.html,如需转载请自行联系原作者

相关文章
|
8月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
62 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
80 0
|
2月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
24天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
2月前
|
JSON 前端开发 JavaScript
JavaScript原生实现AJAX技术详解
【4月更文挑战第22天】本文详细介绍了使用原生JavaScript实现AJAX技术,包括基本原理和步骤。AJAX借助`XMLHttpRequest`对象实现异步通信,允许网页在不刷新情况下与服务器交换数据。文中提供示例展示了如何创建请求、设置回调函数、处理响应数据以及设置请求头和发送不同类型的数据。此外,还讨论了跨域问题及其解决方案,如CORS和JSONP。掌握这些基础知识对前端开发者至关重要,尽管现代框架提供了更高级的抽象。
|
2月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
28 0
|
2月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
52 0
|
2月前
|
JSON 前端开发 JavaScript
原生 AJAX 详解
原生 AJAX 详解
51 0
|
2月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
2月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
66 0