`
chengyue2007
  • 浏览: 1490097 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

Ajax Post 与 Get 实例

 
阅读更多

学习 Ajax 那么多的理论,这里有两个不错的 Ajax Post 与 Get 的实例,让我们去学习下吧。

先是学习 Ajax 的 Post,程序效果请参看 Ajax 的 Post 传值

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Post 传值</title>
</head>

<script language="javascript">
function saveUserInfo()
{
	//获取接受返回信息层
	var msg = document.getElementById("msg");

	//获取表单对象和用户信息值
	var f = document.user_info;
	var userName = f.user_name.value;
	var userAge   = f.user_age.value;
	var userSex   = f.user_sex.value;

	//接收表单的URL地址
	var url = "ajax_output1.php";

	//需要POST的值,把每个变量都通过&来联接
	var postStr   = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

	//实例化Ajax
	//var ajax = InitAjax();


	var ajax = false;
	//开始初始化XMLHttpRequest对象
	if(window.XMLHttpRequest) 
	{ 	//Mozilla 浏览器
		ajax = new XMLHttpRequest();
        if (ajax.overrideMimeType) 
		{	//设置MiME类别
            ajax.overrideMimeType("text/xml");
        }
	}
	else if (window.ActiveXObject) 
	{ 	// IE浏览器
		try 
		{
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
    	} 
		catch (e) 
		{
        	try 
			{
            	ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } 
			catch (e) {}
         }
	}
    if (!ajax) 
	{ 	// 异常,创建对象实例失败
		window.alert("不能创建XMLHttpRequest对象实例.");
		return false;
	}

	//通过Post方式打开连接
	ajax.open("POST", url, true);

	//定义传输的文件HTTP头信息
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

	//发送POST数据
	ajax.send(postStr);

	//获取执行状态
	ajax.onreadystatechange = function() 
	{ 
   		//如果执行状态成功,那么就把返回信息写到指定的层里
   		if (ajax.readyState == 4 && ajax.status == 200) 
		{ 
    		msg.innerHTML = ajax.responseText; 
   		} 
	} 
}
</script>

<body >
<div id="msg"></div>
<form name="user_info" method="post" action="">
姓名:<input type="text" name="user_name" /><br />
年龄:<input type="text" name="user_age" /><br />
性别:<input type="text" name="user_sex" /><br />
<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>
</body>
</html>

 然后是 Ajax 的 Get,用途是从服务器获取值。

程序效果请参看 Ajax 的 Get 传值

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Get 传值</title>
</head>

<script language="javascript">
function saveUserInfo()
{
	//获取接受返回信息层
	var msg = document.getElementById("msg");

	//获取表单对象和用户信息值
	var f = document.user_info;
	var userName  = f.user_name.value;
	var userAge   = f.user_age.value;
	var userSex   = f.user_sex.value;

	//接收表单的URL地址
	var url = "ajax_output2.php? user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

	//实例化Ajax
	//var ajax = InitAjax();

	var ajax = false;
	//开始初始化XMLHttpRequest对象
	if(window.XMLHttpRequest) 
	{ 
		//Mozilla 浏览器
        ajax = new XMLHttpRequest();
        if (ajax.overrideMimeType) 
		{//设置MiME类别
        	ajax.overrideMimeType("text/xml");
		}
	}
	else if (window.ActiveXObject) 
	{ 	// IE浏览器
    	try 
		{
        	ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } 
		catch (e) 
		{
			try 
			{
            	ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
	}
    if (!ajax) 
	{ 	
		// 异常,创建对象实例失败
        window.alert("不能创建XMLHttpRequest对象实例.");
        return false;
    }               

	//通过Post方式打开连接
	ajax.open("GET", url, true);

	//发送GET数据,已经在URL中赋了值所以send那里只要加个空参.
	ajax.send(null);

	//获取执行状态
	ajax.onreadystatechange = function() 
	{ 
   		//如果执行状态成功,那么就把返回信息写到指定的层里
   		if (ajax.readyState == 4 && ajax.status == 200) 
		{ 
    		msg.innerHTML = ajax.responseText; 
   		} 
	} 
}
</script>

<body>
<div id="msg"></div>
<form name="user_info" method="post" action="">
<input type="text" name="user_name" style="display:none;" />
<input type="text" name="user_age" style="display:none;" />
<input type="text" name="user_sex" style="display:none;" />
<input type="button" value="获取服务器变量" onClick="saveUserInfo()">
</form>
</body>

 

 

 

 

分享到:
评论

相关推荐

    Ajax中get和post区别

    "Ajax中Get和Post请求的区别" Ajax作为异步JavaScript和XML的简写,是一种创建交互式网页的技术。其中,Get和Post是两种常用的HTTP请求方法,尽管它们都是用于将数据从客户端发送到服务器端,但是它们之间存在着很...

    php+Ajax(GET&POST)完美实例

    总结,"php+Ajax(GET&POST)完美实例"涵盖了以下几个核心知识点: 1. PHP设置响应头以处理中文字符。 2. Ajax的GET和POST请求实现。 3. 解决Ajax请求中文乱码问题。 4. PHP接收和发送JSON数据。 5. 结合MySQL数据库...

    Ajax中get与post请求详解

    Ajax 技术中 get 与 post 两种请求方式是许多开发者经常遇到的疑问,以下将详细解释两者的区别,并提供实例代码。 一、get 与 post 的基本区别 1. 参数传递方式:get 请求将参数数据队列加到提交表单的 ACTION ...

    AJAX实例,get post应用

    function Ajax(url,method,parameter,onSuccess,onError,onLoad){ this.xmlHttp=null; this.url=url; this.method=method; this.parameter=parameter; this.success=onSuccess?onSuccess:null; this.error=on...

    asp+ajax(jQuery)实例($.ajax()、$.post()、$.get()、$.getJSON()四种模式可选)

    asp+ajax(jQuery)实例($.ajax()、$.post()、$.get()、$.getJSON()四种模式可选 Ajax是目前比较流行的网站建设技术,尤其作为网站建设者来说,掌握它十分有必要,如果用原生Javascript开发则比较困难,还好有强大的...

    ajax+json实例

    2. 打开与服务器的连接,设置请求方法(GET或POST),URL,是否异步。 3. 发送请求,如果为POST,还需设置请求头。 4. 监听状态变化,当状态为4(完成)时,处理服务器返回的数据。 **二、JSON介绍** JSON是一种轻...

    《AJAX编程技术与实例》

    3. 使用open()方法设置请求类型(GET或POST)、URL和是否异步。 4. 发送请求到服务器,可以使用send()方法传递参数。 5. 服务器处理请求并返回响应。 6. XHR对象的onreadystatechange事件监听器检测状态变化,当状态...

    Jquery Ajax分页(有实例)

    jQuery封装了AJAX操作,提供了一套简洁的API,如`$.ajax()`, `$.get()`, `$.post()`等,使开发者能够轻松地实现AJAX请求。 分页通常分为两种类型:服务器端分页和客户端分页。服务器端分页意味着每次用户翻页时,...

    Ajax程序开发经典实例教程.zip

    在jQuery中,可以使用$.ajax()、$.get()或$.post()函数发起请求;在Vue.js和React.js中,通常配合axios库来处理异步数据请求。 总的来说,Ajax程序开发涉及到JavaScript基础、HTTP协议理解、XML/JSON数据处理以及...

    ajax 源码100大实例

    **Ajax 源码100大实例:深入理解与应用** Ajax(Asynchronous JavaScript and XML)技术,自2005年引入以来,极大地改变了Web应用程序的用户体验,通过在后台与服务器进行少量数据交换,实现了页面的无刷新更新。本...

    Ajax编程技术与实例

    本文将深入探讨Ajax的核心概念、工作原理及其在实际开发中的应用实例。** **一、Ajax核心概念** Ajax的核心在于创建 XMLHttpRequest 对象,它是Ajax通信的基础。通过这个对象,JavaScript可以向服务器发送异步请求...

    基于javaweb 的 AJAX最全面的实例源码

    9. **JQuery与AJAX**:许多实例可能使用了JQuery库,JQuery简化了AJAX的使用,提供了$.ajax()、$.get()、$.post()等便捷方法。 10. **AJAX与Spring MVC**:在JavaWeb环境中,AJAX常与MVC框架如Spring MVC结合,用于...

    Ajax下拉框实例,Ajax小实例

    3. **构造Ajax请求**:Ajax请求通常包含四个主要部分:URL(服务器接口地址)、类型(GET或POST)、数据(发送到服务器的数据,如果有的话)和回调函数(处理服务器响应)。 4. **发送请求**:在JavaScript函数中,...

    Ajax实例 Ajax实例

    jQuery库提供了更简洁的API来实现Ajax操作,如`$.ajax()`、`$.get()`和`$.post()`。以下是一个使用jQuery的Ajax GET请求示例: ```javascript $.get('ajax_example.php', function(responseData) { console.log...

    AJAX学习实例与数据库交互实例

    2. GET与POST请求:AJAX支持GET和POST两种HTTP请求方式。GET用于获取资源,参数显示在URL中;POST用于发送数据,适合处理大量或敏感信息,参数隐藏在请求体中。 3. 数据格式:虽然名字中包含XML,但实际AJAX可以...

    JSP.Ajax网站开发典型实例

    3. **编写Ajax函数**:使用JavaScript创建XMLHttpRequest对象,发送GET或POST请求到服务器。 4. **处理响应**:在Ajax回调函数中解析服务器返回的数据,更新DOM元素。 5. **测试与优化**:确保所有功能正常工作,...

    ajax登录验证实例

    - `method`:请求类型,通常是'GET'或'POST'。 - `data`:要发送到服务器的数据,如用户名。 - `dataType`:期望服务器返回的数据类型,可能是'json'、'xml'、'html'等。 - `success`:服务器响应成功时的回调函数,...

    jquery ajax用json传值实例asp.net

    type: 'POST', // 或 'GET' dataType: 'json', // 告诉jQuery期待服务器返回的数据类型 data: JSON.stringify({ key1: 'value1', key2: 'value2' }), // 将数据转换为JSON字符串 contentType: 'application/json...

    ajax实例 ajax实例

    **Ajax 实例与 jQuery 实现** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过JavaScript与服务器进行异步数据交换,提高了用户体验,使得用户界面更加...

    ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例

    本篇文章将深入探讨Ajax的核心概念、工作原理及其在实际开发中的应用实例。 ### 一、Ajax核心概念 1. **异步通信**:Ajax的最大特点就是异步,即在不阻塞用户交互的前提下,向服务器发送请求并获取数据。 2. **...

Global site tag (gtag.js) - Google Analytics