原生及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和跨域的相关概念但是依然没有实现过,其中有一个重要的原因我认为是我当时并不 ...
随机推荐
- CentOS Python 安装MySQL-python
一.安装mysql yum list | grep mysql >>yum install -y mysql-server mysql mysql-devel CentOS 7的yum源中 ...
- Project Euler：Problem 41 Pandigital prime
We shall say that an n-digit number is pandigital if it makes use of all the digits 1 to n exactly o ...
- Cannot create __weak reference in file using manual reference counting
Xcode更新到7.3后会出现NSObject+MJProperty.h报Cannot create __weak reference in file using manual reference c ...
- 可展开的UITableView (附源码)
本文转载至 http://www.apkbus.com/forum.php?mod=viewthread&tid=137207&extra=page%3D1 由于工作需要,写了一个UI ...
- python 基础 1.5 python数据类型（四）--字典
一.python 数据类型--字典 1.用字符串存储信息,如:存储“姓名,身高,性别”: In [1]: info='Tom 170 M' //字符串存储信息 In [3]: info[0:3] // ...
- GS发包到MS
GS发包到MS(GS,MS包交互过程) 例:人物上线 首先看看其实如何确定是哪张地图的 数据库首先只保存一个mapid 在share初始化的时候已经初始化了所有map,并保存了map的指针信息,其ke ...
- python 中读取excel
第一步: 先下载一个xlrd 包 # pip install xlrd import xlrd from datetime import date, datetime file = '学生信息表.x ...
- intellij idea 大内存优化配置 idea64.exe.vmoptions文件配置
-ea-server-Xms2G-Xmx4096M-Xss2m-XX:MaxMetaspaceSize=2G-XX:ReservedCodeCacheSize=1G-XX:MetaspaceSize= ...
- MongoDB C#驱动：
MongoDB C#驱动: http://xiaosheng.me/2016/09/15/article24 http://www.cnblogs.com/wuhuacong/p/5098348.ht ...
- SQL中的四种连接方式
转自:http://www.cnblogs.com/afirefly/archive/2010/10/08/1845906.html 联接条件可在FROM或WHERE子句中指定,建议在FROM子句中指 ...