原生及jq方式使用ajax
1.原生js实现Ajax方法：
// 封装ajax()方法
function ajax(url,fnSucc,fnFaild){
//1、创建Ajax 对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest(); //声明 兼容除IE6外 所有主流浏览器
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //声明 兼容IE6 内置的 微软的 插件
} //2、连接服务器(打开连接服务器)
// open(method,url,async)
// method ：请求的类型；GET 或 POST
// url ：文件在服务器上的位置
// async ：true（异步）或 false（同步）
oAjax.open('GET',url,true); //3、发送请求
oAjax.send(); //4、接受请求
oAjax.onreadystatechange=function (){ //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
/** readyState状态含义
* 0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if(oAjax.readyState==4){
/** status 状态含义
200: "OK" 成功
404: 未找到页面 出错
*/
if (oAjax.status==200) {
//alert('成功了！'+Ajax.readyState); //responseXML 获得 XML 形式的响应数据。
fnSucc(oAjax.responseText); //responseText 获得字符串形式的响应数据。
}
else{
//alert('失败了');
if(fnFaild){
fnFaild
}
}
}
};
}
ajax(url,fnSucc,fnFaild)函数参数介绍：
url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名）
fnSucc:成功返回信息
fnFaild:失败返回信息
HTML页面使用方法 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1'); oBtn.onclick=function ()
{ //阻止缓存方法：缓存是根据URL来存储的。只要url在变，就可以了。在路径那里加上get数据。getTime()是毫秒数
//第二种阻止缓存方法: 声明全部变量num = 0; 在路径后面加'aaa.txt?='+(num++) 递归
ajax('aaa.txt?t='+new Date().getTime(), function (str){
alert(str);
}, function (){
alert('失败');
});
};
};
</script>
</head> <body>
<input id="btn1" type="button" value="读取" />
</body>
</html>
2.jq方式实现Ajax方法：
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
dataType: "json",
success: function(data) {
if (data.success) {
$("#searchResult").html(data.msg);
} else {
$("#searchResult").html("出现错误：" + data.msg);
}
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
});
$("#save").click(function(){
$.ajax({
type: "POST",
url: "serverjson.php",
data: {
name: $("#staffName").val(),
number: $("#staffNumber").val(),
sex: $("#staffSex").val(),
job: $("#staffJob").val()
},
dataType: "json",
success: function(data){
if (data.success) {
$("#createResult").html(data.msg);
} else {
$("#createResult").html("出现错误：" + data.msg);
}
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
});
});
注：
type：类型，“POST”或者“GET”，默认为“GET”
url：发送请求的地址
data：是一个对象连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据包含HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”
success：是一个方法，请求成功后的回掉函数。传入返回后的数据，以及包含成功代码的字符串
error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象
原生及jq方式使用ajax的更多相关文章
- JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- 原生方式实现Ajax技术
一:什么是Ajax? Ajax:异步的JavaScript和XML,用于完成网页局部刷新功能(修改少量数据只用局部刷新,不用再整个网页重新加载): XML的作用:1.是用于数据传输,但现在都在使用JS ...
- MVC中处理表单提交的方式（Ajax+Jquery）
MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...
- 动画特效的原生、jQ和CSS3方法
最近一直在看运动的JS特效,主要看的是原生写法,太麻烦了,最终看到写了个运动的方法,后面可以直接引用,然后发现这个方法和jQ其实差不多了,代码分别如下: 基本的HMTL和CSS <!DOCTYP ...
- 前端JS面试题汇总 Part 3 (宿主对象与原生对象/函数调用方式/call与apply/bind/document.write)
原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...
- 前端与后端数据交互的方式之ajax
前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...
- jq中的ajax传参
一. jq中的Ajax传参有两种 1.通过url地址来传参 2.通过data来传递参数 1. url来传递参数 function GetQuery(id) { | ...
- jq 和 原生js进行传输文件ajax请求
<body> <input id="file_upload" name="file_upload" type="file" ...
- 前端复习－02-ajax原生以及jq和跨域方面的应用。
ajax这块我以前一直都是用现成的jq封装好的东西,而且并没有深入浅出的研究过,也没有使用过原生形式的实现.包括了解jsonp和跨域的相关概念但是依然没有实现过,其中有一个重要的原因我认为是我当时并不 ...
随机推荐
- 流式 storm介绍
Storm是什么 如果只用一句话来描述storm的话,可能会是这样:分布式实时计算系统.按照storm作者的说法,storm对于实时计算的意义类似于hadoop对于批处理的意义.我们都知道,根据goo ...
- ANDROID 推送到底哪家强（转）
之前在群里有同学问我关于推送的一些问题,解答之后我觉得这个话题还挺有用,因为几乎大部分人都会遇到这个问题,那姑且就写篇文章总结给你们吧. 1. 为什么要用推送? 推送功能可谓是现如今任何一个 App ...
- Python学习总结之二 -- 数据类型
带你走进数据类型 一:整数.浮点数 Python中整数和浮点数的定义以及运算和C++都是一样的,我在这里就不需多说了,我就说明一点:Python相对于C/C++而言,定义整数没有int 和 long ...
- 【Android】图片（文件）上传的请求分析结构
怎么在android中上传文件,即怎么用Java向服务器上传文件.上传图片,这是个老问题了,在网上能搜到现成的代码,很多朋友用起来也比较熟了,但是为什么这么写,可能很多朋友并不清楚,这篇文章就来分析一 ...
- 【React Native开发】React Native控件之RefreshControl组件具体解释(21)
),React Native技术交流4群(458982758)种 enabled bool android平台适用 用来设置下拉刷新功能是否可用 progressBackgroundColo ...
- 开发及应用中 Linux与Window 取舍
Linux是开源的,而Windows不是.这个也是Linux与Windows之间最大的差异.一般来说,开源似乎收到了更多系统管理员的亲睐,而开源的软件似乎更受个人电脑用户的欢迎.两种类型之间有很多不同 ...
- Asp.net MVC3 异常全局过滤器处理
1.建立异常全局过滤器处理机制,在Gloabal.asax.cs文件中,有如下代码块: public static void RegisterGlobalFilters(GlobalFilterCol ...
- ArcGIS Overview Map(鹰眼/概览图)
一.说明 引用文件那块,可以参考我上一篇博文,arcgis api for javascript离线部署. 这篇博文中,地图占满整个body 二.运行效果 三.HTML代码 <!DOCTYPE ...
- 九度OJ 1043：Day of Week（星期几） （日期计算）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5349 解决:1923 题目描述: We now use the Gregorian style of dating in Russia. ...
- 2017-2018-1 20179209《Linux内核原理与分析》第六周作业
一.分析system_call中断处理过程 实验 下载最新menu,并在test.c中增加mkdir与mkdir-asm函数原型 rm menu -rf git clone https://githu ...