ajax请求实例,js中ajax请求
jQuery中ajax - get() 方法实例详解
在jquery中使用get，post和ajax方法给服务器端传递数据，在上篇文章给大家分享了jquery中ajax-post()方法实例，下面通过本文继续学习jQuery中ajax
-
get()
方法，具体介绍请看下文。
jQuery
Ajax
参考手册
实例
使用
AJAX
的
GET
请求来改变
div
元素的文本：
$("button").click(function(){
$.get("demo_ajax_load.txt",
function(result){
$("div").html(result);
});
});
亲自试一试
定义和用法
get()
方法通过远程
HTTP
GET
请求载入信息。
这是一个简单的
GET
请求功能以取代复杂
$.ajax
。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用
$.ajax。
语法
$(selector).get(url,data,success(response,status,xhr),dataType)
详细说明
该函数是简写的
Ajax
函数，等价于：
$.ajax({
url:
url,
data:
data,
success:
success,
dataType:
dataType
});
根据响应的不同的
MIME
类型，传递给
success
回调函数的返回数据也有所不同，这些数据可以是
XML
root
元素、文本字符串、JavaScript
文件或者
JSON
对象。也可向
success
回调函数传递响应的文本状态。
对于
jQuery
1.4，也可以向
success
回调函数传递
XMLHttpRequest
对象。
示例
请求
test.php
网页，忽略返回值：
$.get("test.php");
更多示例
例子
1
请求
test.php
网页，传送2个参数，忽略返回值：
$.get("test.php",
{
name:
"John",
time:
"2pm"
}
);
例子
2
显示
test.php
返回值(HTML
或
XML，取决于返回值)：
$.get("test.php",
function(data){
alert("Data
Loaded:
"
+
data);
});
例子
3
显示
test.cgi
返回值(HTML
或
XML，取决于返回值)，添加一组请求参数：
$.get("test.cgi",
{
name:
"John",
time:
"2pm"
},
function(data){
alert("Data
Loaded:
"
+
data);
});
jquery
ajax
的
$.get（）用法详解
js文件
$(document).ready(function(){
$("form").submit(function(event)
{event.preventDefault()})//取消submit的默认行为
$("form
input[type='submit']").click(function(){
var
url
=
$('form').attr('action');
//
取Form中要提交的链接
var
param
=
{};
//
组装发送参数
param['name']
=
$('form
input[name=name]').val();
param['age']
=
$('form
input[name=age]').val();
$.get(url,
param,
function(dom)
{
$('div.get').append(dom)
})
;
//
发送并显示返回内容
});
})
html文件
form
action="ajax.php"
method="get"
Name:
input
type="text"
name="name"
/
Age:
input
type="text"
name="age"
/
input
type="submit"
/
/form
div
class="get"这是ajax的get方法/div
php文件
error_reporting(0);
if($_GET["name"]=="kitty")
{
$name=
"you
are
the
lucky";
}
else
$name=$_GET["name"];
$age=$_GET["age"];
echo
"div
".$name."
".$age."/div";
以上介绍就是本文给大家分享的jQuery中ajax
-
get()
方法实例详解，希望大家喜欢。
ajax请求有哪几种方式?
1. get() 方法通过远程 HTTP GET 请求载入信息。
// 1.创建
var ajax = new XMLHttpRequest();
// 2设置
ajax.open('get', '01.Ajax_get.php');
// 3.发送
ajax.send();
// 4.状态事件
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 ajax.status == 200) {
// 5.使用返回的数据 修改页面的内容
// responseText 返回的就是一个 字符串
// 我们 在ajax 中 如果 是通过 ajax.responseText 获取到的 统统都是字符串
console.log(ajax.responseText);
}
2.post() 通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂的$.ajax().请求成功时可调用回调函数。
//创建ajax实例
var ajax = new XMLHttpRequest();
// 使用post请求
ajax.open('post','ajax_post.php');
// 如果 使用post发送数据 必须 设置 如下内容
// 修改了 发送给 服务器的 请求报文的 内容
// 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发送
// post请求 发送的数据 写在 send方法中
// 格式 name=jackage=18 字符串的格式
ajax.send('name=jackage=998');
// 注册事件
ajax.onreadystatechange = function () {
if (ajax.readyState==4ajax.status==200) {
console.log(ajax.responseText);
}
}
请列举jquery中关于ajax的常用的3种请求的基本用法
jQuery中ajax的4种常用请求方式：
1.$.ajax()返回其创建的 XMLHttpRequest 对象。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。
如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。
实例：
保存数据到服务器，成功时显示信息。
$.ajax({
type: "post",
dataType: "html",
url: '/Resources/GetList.ashx',
data: dataurl,
success: function (data) {
if (data != "") {
$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
2.通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
实例：
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
3. 通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
实例：
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功！");
}
})
4.通过 HTTP GET 请求载入 JSON 数据。
实例：
$.getJSON(";tagmode=anyformat=jsonjsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("img/").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
希望对你有用。
一分钟学会什么是Ajax及Ajax请求的五个步骤
AJAX的意思就是异步的JavaScript和XML。简而言之，它是使用XMLHttpRequest对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息，包括JSON、XML、HTML和文本文件。AJAX最为吸引人的就是它的“异步”特性，AJAX可以无需刷新页面而与服务器端进行通信。
Ajax请求的五个步骤：
1、建立xmlHttpRequest对象
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
if(xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType("text/xml");
}
} else if(window.ActiveXobject) {
var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for(var i = 0; i activeName.length; i++) {
try {
xmlHttp = new ActiveXobject(activeName[i]);
break;
} catch(e) {}
}
}
if(!xmlHttp) {
alert("创建xmlhttprequest对象失败");
} else {}
2、设置回调函数
xmlHttp.onreadystatechange= callback;
function callback(){}
3、使用OPEN方法与服务器建立连接??xmlHttp.open("get","ajax?name="+ name,true)
此步注意设置http的请求方式（post/get）,如果是POST方式，注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
4、向服务器端发送数据
xmlHttp.send(null)；如果是POST方式就不为空
5、在回调函数中针对不同的响应状态进行处理
if(xmlHttp.readyState == 4){ ????? //判断交互是否成功
if(xmlHttp.status == 200){ ??????? //获取服务器返回的数据 ??????? //获取纯文本数据
var responseText =xmlHttp.responseText;
document.getElementById("info").innerHTML = responseText;
}
}
扩展资料：
Ajax优缺点
优点：
1、异步请求，不妨碍用户浏览页面或者其他操作。
2、局部刷新，无需重新刷新页面。
3、界面与应用分离。有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
4、基于标准被广泛支持。
5、前端和后端负载平衡。最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
缺点：
1、back和History,对浏览器机制的破坏。
2、安全问题。易受到黑客攻击。
3、对搜索引擎支持较弱。
4、不能很好支持移动设备。
5、违背URL和资源定位的初衷。