原生及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和跨域的相关概念但是依然没有实现过,其中有一个重要的原因我认为是我当时并不 ...
随机推荐
- mongodb distinct去重
MongoDB的destinct命令是获取特定字段中不同值列表.该命令适用于普通字段,数组字段和数组内嵌文档. mongodb的distinct的语句: db.users.distinct('last ...
- Docker入门系列7 动态映射端口port mapping
为何想要动态映射端口呢? 因为刚开始run启动容器时,并不知道里面需要映射哪些端口,等容器已创建了,想映射端口. 当然可以通过先commit成镜像,然后再次run时指定端口,但会生成中间的镜像,对于有 ...
- PowerBuilder -- Len(), LenA() 与 String, Blob
使用的是Powerbuilder12.5与Powerbuild9 不太一样 函数 String Blob Len() 返回字符数 返回字符数对应的字节数 LenA() 返回字节数 返回字符数对应的字节 ...
- mac上利用minikube搭建kubernetes(k8s)环境
友情提示:对于初次接触k8s的同学,强烈建议先看看本文最后的参考文章. 环境: mac os(Mojave) 前提:先安装好kubectl (brew install kubectl) .docker ...
- python爬虫入门篇
优质爬虫入门源码:https://github.com/lining0806/PythonSpiderNotes Python Spider:https://www.cnblogs.com/wangy ...
- 数据结构与算法之枚举（穷举）法 C++实现
枚举法的本质就是从全部候选答案中去搜索正确的解,使用该算法须要满足两个条件: 1.能够先确定候选答案的数量. 2.候选答案的范围在求解之前必须是一个确定的集合. 枚举是最简单.最基础.也是最没效率的算 ...
- jQuery+bootstrap实现美化警告/确认/提示对话框插件
http://www.html580.com/12067/demo http://craftpip.github.io/jquery-confirm/
- ifndef/define/endif 和 #ifdef 、#if 作用和用法
为了能简单的看看某些linux内核源码,复习了一下c语音,今天汇总了一下关于宏定义的相关内容: 一.ifndef/define/endif用法: .h文件,如下: #ifndef XX_H #defi ...
- jQuery 插件开发（1）
JavaScript 是一门混乱的语言,好的特性和坏的特性混杂在一起.而不同浏览器对标准的解析不一致,使得这门语言更加混乱,在这种情况下遵循最佳实践有诸多好处,至少不会掉入坑里.所以就有了<Ja ...
- LeetCode——Binary Tree Postorder Traversal
Given a binary tree, return the postorder traversal of its nodes' values. For example: Given binary ...