关键词：
对于网页开发而言，网页与服务器之间的数据交互是很频繁的，至关重要的一件事情。但是对于很多的初学者来说，这就成了一个不可逾越的难点问题，本篇博客将从一个初学者的关点讲解其中一种交互方式，此方法经过本人验证有效，并附有代码。
首先要实现网页前后台程序的交互需要安装后台框架，本人安装的框架为wamp（windows+apache+mysql+php）。安装程序可以通过我在百度网盘上的分享链接下载http://pan.baidu.com/s/1cIKb8a 提取码是cnfh。至于安装过程中的配置可以参考http://wenku.baidu.com/link?url=eB_xVPpECufRgw2rrXptR_H8m8uT_PLa1818sX7oPXmbjDW36W-fYKtTHREv5NcANVjZfbcdtp2NWqqBt4dMVFtgL7sbMJOwoG-UydmT90_这里 不再缀续。
框架安装好之后就可以进行简单的网页开发了。
首先是一个简单的用于测试的网页代码。
<html>
<head>
<script src="test.js"></script> //使用的test.js与此html代码位于同一文件路径下，如果路径不同需要使用相对路径或绝对路径
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<button type="button" id="s" onclick = "test()">test</button>//创建一个按钮用于向服务器上传数据
</div>
<span id="processing"></span>//用于接收服务器反馈回来的数据
</body>
</html>
接下来是text.js文件
function test()//发送客户端请求
{
xmlHttp=GetXmlHttpObject();//获取xmlhttp对象
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="test.php"//服务器后台处理程序，此时需要和test.html文件放到同一文件夹下，如果不在同一文件夹下，需要加相对路径或者绝对路径。
url=url+"?q="+1;//网页发送给后台的数据。可以是数字，字符串，json格式数据等任意数据结构
url=url+"&sid="+Math.random()//添加一个随机数作为后缀，保证每次请求后台均会重新处理并相应。
xmlHttp.onreadystatechange=stateChanged//后台处理程序回调函数
xmlHttp.open("GET",url,true)//使用GET方式发送
xmlHttp.send(null)//发送数据 。
}
function stateChanged()//监测程序回调函数
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")//如果xmlhttp对象成功接收到数据
{
var strJson = xmlHttp.responseText;//获得数据文本
//var state = new Function("return" + strJson)();//采用json格式解析
var state = eval("("+strJson+")");//和上述注释函数功能相同，使用一个即可
document.getElementById("processing").innerHTML=state.openState;//显示内容
}
}
function GetXmlHttpObject()//获取xmlhttp对象
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
最后是test.php文件，需要注意的是，test.php文件必须放到安装好的wamp框架下才有效，例如我的框架安装在E盘，则我的test.php文件需要放到E:\AppServ\www\目录下或者该目录的子目录 下才有效（之前被这个问题卡了好久，php文件不执行导致 前端一直连不上后端），以下是php文件代码
<?php
$hint = "";
function test()//测试程序
{
$json_string = file_get_contents('state.json');//打开一个json文件
$data = json_decode($json_string,true);//解析json文件字符串
if($data["openState"] == 'close')//对json数据进行操作
{
$data1 = array();
$data1['openState'] = 'open';
$json_string1 = json_encode($data1);
file_put_contents('state.json', $json_string1);
}
if($data["openState"] == 'open')//对json数据进行操作
{
$data1 = array();
$data1['openState'] = 'close';
$json_string1 = json_encode($data1);
file_put_contents('state.json', $json_string1);
}
return $json_string;//反馈数据
}
$q=$_GET["q"];//获取前台传来的数据本测试程序为1
switch($q)
{
case 1:
$hint = test();//执行test函数
break;
}
$response=$hint;
echo $response;//将处理完的数据反馈给前台
?>
另外还需要php文件中提及的state.json文件，这个文件在前后端交互 的时候不是必须的，此处仅仅是为了演示一个完整的json格式文件读写识别操作过程，state.json文件中只有一句代码
{"openState":"close"}
以上代码编写完成后，就可以进行测试了,测试时需要注意的是打开网页的时候不能直接将html文件拖入浏览器，而是需要使用localhost或者127.0.0.1来访问html页面，这样才能与php进行交互，例如，我的文件如图所示
文件位于E:\AppServ\www文件夹下
则我访问test.html文件的方式为在浏览器中输入网址 http://localhost:8080/test.html
其中8080为端口号，是在安装wamp框架时设置的，如果你采用的是其他端口号，请自行修改，另外，如果采用的是默认的端口号80，则可省略端口号。
成功运行时显示的现象是
（注释内容可自行删除）
点击test按钮
显示如下
可见从服务器后端php脚本中成功获取到了信息。再次点击
原来的close变成了open，可见后台脚本执行正常。
至此，一个简单的网页前后端异步交互示例介绍完毕。
你，学会了吗？
前后端交互技术有哪些
...端交互的技能有三个：1、ajaxajax是一种用于创建快速动态网页的技能。经过在后台与服务器进行少量数据交换，ajax能够使网页完成异步更新。这意味着能够在不重新加载整个网页的情况下，对网页的某部分 查看详情
前后端交互模式(代码片段)
...行数据交互的一种技术。Ajax能够创建交互式、快速动态网页应用，无需重新加载整个网页的情况下，能够更新部分网页。Ajax可以使网页实现异步更新,在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax不是一种新... 查看详情
前后端交互技术有哪些
...端交互的技能有三个：1、ajaxajax是一种用于创建快速动态网页的技能。经过在后台与服务器进行少量数据交换，ajax能够使网页完成异步更新。这意味着能够在不重新加载整个网页的情况下，对网页的某部分进行更新。XMLHttpRequest... 查看详情
初识vue——最简单的前后端交互示例(代码片段)
一、初识vue时的困惑最近想学一门前端技术防身，看到博客园中写vue的多，那就vue吧。都说vue的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue(读音/vju?/，类似于view)是一套用于构建用户界面的渐进式框架。与... 查看详情
基于tomcat服务器，通过jquery的ajax方法访问servlet实现前后端数据同步/异步交流（不必跳转或者刷新网页实现jsp前后端交互）
本文将一步步实现在tomcat服务器上实现使用JQuery的Ajax方法访问Servlet从而将前端的数据能够连接到后端，也能使得后端的数据返回到前端。首先我的环境要求：已配置好tomcat服务器，eclipse（使用别的也一样，... 查看详情
前后端分离与前后端不分离
...前端与后端的耦合度很高。 这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端App应用，为了对接App后端还需... 查看详情
前后端api交互如何保证数据安全性？
...，就避免不了调用后端提供的接口来进行业务交互。网页或者app，只要抓下包就可以清楚的知道这个请求获取到的数据，这样的接口 查看详情
前后端分离与前后端不分离的区别
...耦合度很高。 这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端App应用，为了对接App后端还需... 查看详情
php中使用ajax进行前后端json数据交互
(最近在学习ajax，所以想自己总结一下在PHP中如何使用ajax技术！)一、ajax注意点： 1、原理图：（来自韩顺平ajax视频） 2、ajax返回数据类型： 文本，json，xml （1）文本格式： ... 查看详情
前后端分离与不分离
...度很高。 这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端App应用，为了对接App后端还需... 查看详情
websocket前后端交互通讯
(41条消息)websocket前后端交互通讯_凡客丶的博客-CSDN博客 查看详情
ajax前后端交互利器详解(代码片段)
✍Ajax前后端交互利器🔥Ajax前后端交互利器地址🔥Ajax前后端交互利器详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/120116296🔥Ajax前后端交互利器详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/1 查看详情
ajax前后端交互利器详解(代码片段)
✍Ajax前后端交互利器🔥Ajax前后端交互利器地址🔥Ajax前后端交互利器详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/120116296🔥Ajax前后端交互利器详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/1 查看详情
前后端交互流程，如何进行交互
（1）前后端都要充分了解项目的需求（2）接口设计（出接口文档），前后端沟通设计接口，前端需要后台返回什么样的数据（格式），后台需要前端传递什么参数（哪些参数是必须的，哪些参数是可选的，采用get还是post，哪些... 查看详情
浅谈前后端交互
...——由后台设计修改（前端是接口文档的使用者）其次，前后端交互的数据，格式是：json，（xml不多了）重要的是，前后端如何交互？？——接口地址+前端请求的参数+后台返回的参数 1、接口地址： 2、前端请求的参数... 查看详情
前后端交互
...，还需要再正确的区域渲染出服务端的数据。那么有哪些前后端交互的技能服务端渲染世界上大多数动态服务页面都是服务端的数据渲染，接口->前端赋值->模板渲染，都是在服务器完成。所以当我们查看源码的时候，我们... 查看详情
前后端交互
1.ajax交互btn,服务器和html控件都可以<inputtype="button"id="btnSave"value="提交"/>$("#btnSave").click(function(){varTitle=$("#Title").val();varSuggest=$("#Suggest").val();varUserId=$("#UserId").val();vartip=" 查看详情
基于tomcat服务器，通过jquery的ajax方法访问servlet实现前后端数据同步/异步交流（不必跳转或者刷新网页实现jsp前后端交互）(代码片段)
...下来将一步步介绍如何进行操作：先在eclipse创建动态网页工程文件名字记得改一下，然后创建在Webcontent下创建一个JSP文件在交互.jsp中输入以下代码：<%@pagelanguage="java"contentType="text/html;charset=UTF... 查看详情