jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现
一、定义
W3C里这么解释AJAX:
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
就是利用JS来无刷新与后端交互,通过get和post方式把数据发送到后端,或者请求后端的数据,然后根据请求的数据进行改变DOM节点等操作,从而取消掉用form的submit方式一提交就会跳转页面的情况,像在创建账号的时候检测此用户名是否存在就是一个典型的案例,本文讲从原生JS和jQuery方面介绍AJAX的实现,跨域问题暂且不表。
二、原生JS实现AJAX
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
1.GET
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);
xmlhttp.send();
传递参数直接在?后指定,多个参数用&分隔
GET请求同一URL时会有缓存,通过参数是否一致来判断
解决缓存问题,加个时间戳使每次参数不一致,上例中的t=Math.random()
2.POST
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
POST没有缓存
POST发送的数据量大
AJAX无法发送文件
readyState改变时触发onreadystatechange事件,4为完成
status是返回状态,200是成功,404是未找到页面
responseText是返回的数据,为字符串格式
三、jQuery实现AJAX
1.GET
使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:
$.get(url,[callback])
$.get("demo_test.php?id=1&name=lemoo",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
参数通过URL传递
有缓存
2.POST
与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:
$.post(url,[data],[callback])
$.post("demo_test.php",{
num:1
},
function (data) {
alert(data);
});
使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:
$(selector).serialize()
3.ajax
使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:
$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。
$.ajax({
type:"post",
url:"demo_test.php",
data: { num: 123 },
dataType:"text",
success: function (data) {
alert(1);
}
});
4.getJSON
使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为:
$.getJSON(url,[data],[callback])
可以与$.each搭配来遍历数据
$.getJSON("demo_test.php",function(data){
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("
" + sport["name"] + "");
});
});
这样返回的数据直接就是JSON格式的就可以使用,但是要注意缓存问题。
四、AJAX的调试
在运行AJAX的页面按F12(Chrome下),进入“Network”选项卡,点击"XHR"过滤器,然后触发AJAX的事件。
点击要进行调试的AJAX动作,进入详情页。
Request URL:查看请求的地址,一般在这里查看向后台请求的URL是否正确,错误404的话一般这里会有问题
Request Method:请求的方式,查看是GET或者POST,GET请求的参数一致的话会有缓存
Status Code:返回状态。一般是200正常;404未找到页面,一般是URL错误,或者后台没有创建相应的action;500内部服务错误,多为后台错误。
底下的Query String Parameters是向后台发送的数据,一般这里看参数是否有问题,格式及命名是否正确,事故多发地。
点击Response就可以查看服务器返回的数据了,一般在这里查看返回是否正常,格式是否正确,一般是JSON。
基本上通过发送的数据及传回的数据就能定位问题所在了。
五、总结
一般来说,处理AJAX,用jQuery的get和post的就够用,如果是JSON数据的话用getJSON,注意缓存问题,特殊的应用再考虑用ajax(),另外,AJAX还有一个很严重的问题是跨域,这个以后再说。
jq ajax请求php原声,原生JS与jQuery对AJAX的实现相关推荐
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- ajax异步处理代码实现,原生JS代码实现一个Ajax异步请求
异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
- ajax jq 图片上传请求头_如何使用js或jQuery向Ajax请求添加自定义HTTP头?
下面是一个使用XHR 2的示例:function xhrToSend(){ // Attempt to creat the XHR2 object var xhr; try{ xhr = new XM ...
- 原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图: 好了,下边 ...
- span的取值与赋值(原生js与jquery) - 对比篇
文章目录 关于span的取值与赋值 - 原生js与jquery代码 一. span的`取值`: 1. `javascript` 2. `jquery` 二. span的`赋值`: 1. `javasc ...
- 原生js和jquery常用的DOM操作
前言 将原生JS和jquery里面的DOM操作进行了一下整理,方便以后温习. 创建元素节点 1.原生: document.createElement("div") 2.jquery ...
- html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素 创建select var select = document.cre ...
- 原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...
- 原生js与jQuery显示隐藏div的几种方法
原生Js与jQuery显示隐藏div的几种方法 简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解. 首先是display的方法 ...
最新文章
- JS实例学习笔记——w3cschool+菜鸟教程
- Ribbon 负载均衡调用01——概述
- 成功实施ERP的八个建议
- HDU-水饺基情 二维树状数组
- c语言基类型,C语言基本类型边界值
- 机器学习算法总结--决策树
- Wordpress SEO robots
- Django之Model操作
- Kalibr 标定双目内外参数以及 IMU 外参数
- oracle merge
- 计算机信息机房,计算机信息中心机房建设标准
- 在 Ubuntu 中查看连接的Wi-Fi 密码
- POI动态下载Excel模板案例
- C语言药店药品管理系统
- 子桓说:成人的世界,有钱就意味着一切
- C#之 DateGridView分页超简单
- 利用python修改小米运动数据,整个朋友圈都感觉太夸张了
- MFC更改对话框的背景色
- 我们分析了 10000 条视频,终于知道了今日头条推荐系统的秘密
- Android笔记-GridView实现九宫格布局