学习 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作为异步JavaScript和XML的简写,是一种创建交互式网页的技术。其中,Get和Post是两种常用的HTTP请求方法,尽管它们都是用于将数据从客户端发送到服务器端,但是它们之间存在着很...
总结,"php+Ajax(GET&POST)完美实例"涵盖了以下几个核心知识点: 1. PHP设置响应头以处理中文字符。 2. Ajax的GET和POST请求实现。 3. 解决Ajax请求中文乱码问题。 4. PHP接收和发送JSON数据。 5. 结合MySQL数据库...
Ajax 技术中 get 与 post 两种请求方式是许多开发者经常遇到的疑问,以下将详细解释两者的区别,并提供实例代码。 一、get 与 post 的基本区别 1. 参数传递方式:get 请求将参数数据队列加到提交表单的 ACTION ...
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()四种模式可选 Ajax是目前比较流行的网站建设技术,尤其作为网站建设者来说,掌握它十分有必要,如果用原生Javascript开发则比较困难,还好有强大的...
2. 打开与服务器的连接,设置请求方法(GET或POST),URL,是否异步。 3. 发送请求,如果为POST,还需设置请求头。 4. 监听状态变化,当状态为4(完成)时,处理服务器返回的数据。 **二、JSON介绍** JSON是一种轻...
3. 使用open()方法设置请求类型(GET或POST)、URL和是否异步。 4. 发送请求到服务器,可以使用send()方法传递参数。 5. 服务器处理请求并返回响应。 6. XHR对象的onreadystatechange事件监听器检测状态变化,当状态...
jQuery封装了AJAX操作,提供了一套简洁的API,如`$.ajax()`, `$.get()`, `$.post()`等,使开发者能够轻松地实现AJAX请求。 分页通常分为两种类型:服务器端分页和客户端分页。服务器端分页意味着每次用户翻页时,...
在jQuery中,可以使用$.ajax()、$.get()或$.post()函数发起请求;在Vue.js和React.js中,通常配合axios库来处理异步数据请求。 总的来说,Ajax程序开发涉及到JavaScript基础、HTTP协议理解、XML/JSON数据处理以及...
**Ajax 源码100大实例:深入理解与应用** Ajax(Asynchronous JavaScript and XML)技术,自2005年引入以来,极大地改变了Web应用程序的用户体验,通过在后台与服务器进行少量数据交换,实现了页面的无刷新更新。本...
本文将深入探讨Ajax的核心概念、工作原理及其在实际开发中的应用实例。** **一、Ajax核心概念** Ajax的核心在于创建 XMLHttpRequest 对象,它是Ajax通信的基础。通过这个对象,JavaScript可以向服务器发送异步请求...
9. **JQuery与AJAX**:许多实例可能使用了JQuery库,JQuery简化了AJAX的使用,提供了$.ajax()、$.get()、$.post()等便捷方法。 10. **AJAX与Spring MVC**:在JavaWeb环境中,AJAX常与MVC框架如Spring MVC结合,用于...
3. **构造Ajax请求**:Ajax请求通常包含四个主要部分:URL(服务器接口地址)、类型(GET或POST)、数据(发送到服务器的数据,如果有的话)和回调函数(处理服务器响应)。 4. **发送请求**:在JavaScript函数中,...
jQuery库提供了更简洁的API来实现Ajax操作,如`$.ajax()`、`$.get()`和`$.post()`。以下是一个使用jQuery的Ajax GET请求示例: ```javascript $.get('ajax_example.php', function(responseData) { console.log...
2. GET与POST请求:AJAX支持GET和POST两种HTTP请求方式。GET用于获取资源,参数显示在URL中;POST用于发送数据,适合处理大量或敏感信息,参数隐藏在请求体中。 3. 数据格式:虽然名字中包含XML,但实际AJAX可以...
3. **编写Ajax函数**:使用JavaScript创建XMLHttpRequest对象,发送GET或POST请求到服务器。 4. **处理响应**:在Ajax回调函数中解析服务器返回的数据,更新DOM元素。 5. **测试与优化**:确保所有功能正常工作,...
- `method`:请求类型,通常是'GET'或'POST'。 - `data`:要发送到服务器的数据,如用户名。 - `dataType`:期望服务器返回的数据类型,可能是'json'、'xml'、'html'等。 - `success`:服务器响应成功时的回调函数,...
type: 'POST', // 或 'GET' dataType: 'json', // 告诉jQuery期待服务器返回的数据类型 data: JSON.stringify({ key1: 'value1', key2: 'value2' }), // 将数据转换为JSON字符串 contentType: 'application/json...
**Ajax 实例与 jQuery 实现** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过JavaScript与服务器进行异步数据交换,提高了用户体验,使得用户界面更加...
本篇文章将深入探讨Ajax的核心概念、工作原理及其在实际开发中的应用实例。 ### 一、Ajax核心概念 1. **异步通信**:Ajax的最大特点就是异步,即在不阻塞用户交互的前提下,向服务器发送请求并获取数据。 2. **...