在这里，我们将给大家分享关于基于Ajax的网站上的OpenGraph的知识，让您更了解ajax网站开发的本质，同时也会涉及到如何更有效地10个基于Ajax的PHPWebmail客户端、12_基于aja
在这里，我们将给大家分享关于基于Ajax的网站上的OpenGraph的知识，让您更了解ajax网站开发的本质，同时也会涉及到如何更有效地10个基于Ajax的PHP Webmail客户端、12_基于ajax的程序开发、ajax使用总结-ajax的配置-ajax的调用-ajax的中文乱码-ajax的表单提交、ajax的open和send的内容。
本文目录一览：- 基于Ajax的网站上的OpenGraph（ajax网站开发）
- 10个基于Ajax的PHP Webmail客户端
- 12_基于ajax的程序开发
- ajax使用总结-ajax的配置-ajax的调用-ajax的中文乱码-ajax的表单提交
- ajax的open和send
基于Ajax的网站上的OpenGraph（ajax网站开发）
我有一个网站，该网站完全基于Ajax（哈希导航）。
有没有一种方法可以使用Javascript刷新基于ajax的网站的Open Graph元标记？（当我单击一个链接时，标记和其中的值应更改）
答案1
小编典典否。OpenGraph标记必须出现在带有纯HTTP的GETable的HTML页面上。
这是因为当用户与OG对象进行交互（例如执行操作等）时，Facebook将在OG URL上执行HTTP GET，并期望看到标记中返回的OG标签。
解决方案是为每个对象创建规范的URL。这些URL包含基本的HTML标记，包括OG标签。
在对这些URL的请求中，如果看到包含“
facebookexternalhit”的传入用户代理字符串，则呈现HTML。如果您不这样做，则可以使用302重定向到您的ajax URL。在ajax
URL上，您的“喜欢”按钮和您发布的所有OG操作均应指向规范的URL对象
例：
作为用户，我在http://yoursite.com/#!/artists/monet上。我单击了“喜欢”按钮，或发布了一个动作，但是“喜欢”按钮的href参数或发布动作时对象的URL应该是对象的网络可点击规范网址-
在这种情况下，也许是http：// yoursite .com / artists /
monet
当使用浏览器的用户点击http://yoursite.com/artists/monet时，您应该将其重定向到http://yoursite.com/#!/artists/monet，但是如果传入的用户代理说这是Facebook的刮板，您只需返回代表艺术家莫奈的标记。
有关真实示例，请参阅均使用此设计模式的Deezer，Rdio和Mog。
10个基于Ajax的PHP Webmail客户端
1. RoundCube
RoundCube Webmail 是一个基于浏览器的IMAP 客户端，其提供了丰富的功能，包含MIME，地址本，文件夹操作，邮件搜索和拼写检查。 RoundCube Webmail 由 PHP写成，需要 MySQL 或 Postgres 数据库的支持。其UI完全遵守于XHTML 和 CSS 2.
2. Zimbra
Zimbra 提供了一个开源的邮件和日历系统，也是基于Ajax技术，非常强大的客户端，他可以通过web service集成第三方的应用“mash-ups” ，于是你可以享有CRM，地图或其它更多的功能。
3. Xuheki
Xuheki 是一个很快的 IMAP 使用AJAX技术开发的客户端。你能想到的功能它基本上都有了，它使用的是 GNU General Public License.
4. SquirrelMail
SquirrelMail 这是一个中规中矩的webmail，PHP语言写成，并没有使用AJAX技术，所以并不是很炫，不过它是使用了纯内建的PHP功能支持了IMAP和SMTP。所有的页面都是纯HTML 4.0 (没有任何JavaScript) ，这样的目的主要是为了最大化兼容于不同的浏览器。
5. Atmail
AtMail, 一个免费的轻量级的 Ajax Webmail 客户端，由PHP写成，支持WEB和WAP。
6. afterlogic
AfterLogic WebMail Lite PHP 是一个非常易用的 webmail 但其界面又非常Cool，其支持 AJAX 和皮肤。支持POP3 和 SMTP。支持收发邮件，多附件，多帐号，多域，邮件预览，站点管理。安装非常容易，需要PHP 4.1+，完全开源并完全免费。
7. Hastymail
Hastymail 是一个有完整功能的 IMAP/SMTP 客户端，由 PHP 写成。兼容于 PDAs, 手机, 文本浏览器，以及所有的主流浏览器。 Hastymail 有强大的 插件 系统，因为PHP程序员可以随意地改变或增加自己想要的插件。
8. Mailr
Mailr 是一个开源的 webmail 由 Ruby写成，它使用 Ruby On Rails 的web application 框架。
9. Claros inTouch
Claros inTouch 是一个Ajax 消息套装其包含了主要特性有webmail，地址本，记事本，日历(还在开发)，网络硬盘 (还在开发)，内建的即时聊天，以及RSS阅读器。这是第一个开源的webmail其包含了内建的垃圾邮件保护和即时聊天功能的项目。但主要使用了Java语言，利用 JSP/Servlets 及 J2EE技术和 MySQL 数据库。
10. Postaci
Postaci 是一个基于 PHP 的POP3/IMAP 邮件客户端，其支持 SMTP 认证。 其使用MySQL, mSQL, Microsoft SQL, Sybase 或PostgreSQL数据库。
12_基于ajax的程序开发
12.1 ajax的历史由来
ajax（asynchronous javascript and xml），异步的javascript和xml
12.2 b/s结构的用户体验问题
示例12-1：模拟传统的用户注册流程
源文件：register.html
<!DOCTYPE html> <html> <body> <h1>Demo 邮件系统 - 用户注册</h1> <form name="regForm" id="regForm" action="doRegister.jsp" method="post"> 注册用户名：<input type="text" name="userName" id="userName" /><br /> 注册密码：<input type="password" name="password" id="password" /><br /> 确认密码：<input type="password" name="password2" id="password2" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
源文件：doRegister.jsp
<%@ page language="java" import="java.util.*" %>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
String userName = request.getParameter("userName");
if("scott".equals(userName)){
out.println("用户名" + userName + "已经被占用了，请重新选择用户名！");
}else{
out.println("恭喜您，" + userName + "注册成功了！");
}
%>
示例12-2：对传统的用户注册流程进行改进
源文件：register.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function checkName(){
var cun = document.getElementById("checkUserName");
var un = document.getElementById("userName");
cun.value = un.value;
document.getElementById("checkForm").submit();
}
</script>
</head>
<body>
<h1>Demo 邮件系统 - 用户注册</h1>
<form name="regForm" id="regForm" action="D02_doRegister.jsp" method="post">
注册用户名：
<input type="text" name="userName" id="userName" />
<input type="button" value="检测用户名" onclick="checkName();"/>
<br />
注册密码：<input type="password" name="password" id="password" /><br />
确认密码：<input type="password" name="password2" id="password2" /><br />
<input type="submit" value="提交" />
</form>
<form id="checkForm" name="checkForm" action="D04_checkUserName.jsp" method="post" target="_blank">
<input type="hidden" id="checkUserName" name="checkUserName" />
</form>
</body>
</html>
源文件：doRegister.jsp
<%@ page language="java" import="java.util.*" %>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
String userName = request.getParameter("checkUserName");
if("scott".equals(userName)){
out.println("用户名" + userName + "已经被占用了，请重新选择用户名！");
}else{
out.println("恭喜您，" + userName + "注册成功了！");
}
%>
12.3 采用ajax技术提升用户体验
示例12-3：采用ajax技术完成用户注册
源文件：register.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var req;
function checkUser(){
var checkResult = document.getElementById("checkResult");
checkResult.innerHTML = "正在检测用户名。。。";
var userName = document.getElementById("userName").value;
req = new ActiveXObject("Microsoft.XMLHttp");
req.open("get","http://localhost:8080/08_ajax/D04_checkUserName.jsp?checkUserName=" + userName);
req.onreadystatechange = handleRequest;
req.send(null);
}
function handleRequest(){
var checkResult = document.getElementById("checkResult");
if(req.readyState == 4){
if(req.status == 200){
checkResult.innerHTML = req.responseText;
}else{
alert("An error occurred:" + req.statusText);
}
}
}
</script>
</head>
<body>
<h1>Demo 邮件系统 - 用户注册</h1>
<form name="regForm" id="regForm" action="doRegister.jsp" method="post">
注册用户名：
<input type="text" name="userName" id="userName" onblur="checkUser();" />
<label id="checkResult"></label>
<br />
注册密码：<input type="password" name="password" id="password" /><br />
确认密码：<input type="password" name="password2" id="password2" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
12.4 ajax原理解析
1.JavaScript
javascript is the soul of internet，推荐学习书籍《JavaScript权威指南》
2.DOM
DOM，也就是文档对象模型（Document Object Model），推荐书籍同上
3.XML和CSS
4.XMLHttpRequest对象
兼容浏览器的创建方法：
function createXHR(){
var xhr;
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xhr = false;
}
}
if(!xhr && typeof XMLHttpRequest != 'undefined'){
xhr = new XMLHttpRequest();
}
return xhr;
}
12.5 使用XMLHttpRequest对象与服务器端通信
12.5.1 使用open方法创建一个请求
12.5.2 使用send方法发送一个请求
12.5.3 使用onreadystatechange时间捕获请求状态变化
12.5.4 使用readyState属性判断请求状态变化
12.5.5 使用status属性判断请求的结果
12.5.6 使用responseText获得返回的文本
示例12-4：改进ajax技术
源文件：register.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function createXHR(){
var xhr;
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xhr = false;
}
}
if(!xhr && typeof XMLHttpRequest != 'undefined'){
xhr = new XMLHttpRequest();
}
return xhr;
}
var req;
function checkUser(){
var checkResult = document.getElementById("checkResult");
checkResult.innerHTML = "正在检测用户名。。。";
var userName = document.getElementById("userName").value;
req = createXHR();
req.open("get","http://localhost:8080/08_ajax/D04_checkUserName.jsp?checkUserName=" + userName);
req.onreadystatechange = handleRequest;
req.send(null);
}
function handleRequest(){
var checkResult = document.getElementById("checkResult");
if(req.readyState == 4){
if(req.status == 200){
checkResult.innerHTML = req.responseText;
}else{
alert("An error occurred:" + req.statusText);
}
}
}
</script>
</head>
<body>
<h1>Demo 邮件系统 - 用户注册</h1>
<form name="regForm" id="regForm" action="doRegister.jsp" method="post">
注册用户名：
<input type="text" name="userName" id="userName" onblur="checkUser();" />
<label id="checkResult"></label>
<br />
注册密码：<input type="password" name="password" id="password" /><br />
确认密码：<input type="password" name="password2" id="password2" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
12.6 JavaScript开源框架Prototype简介
12.6.1 prototype常用方法
示例12-5：prototype常用方法$()和$F()
源文件：prototypeSimpleDemo.html
<!DOCTYPE html>
<html>
<head>
<title>prototype</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
function antiSelect(){
var fm = $('f1');
alert(fm.innerHTML);
var cbs = $('c1','c2','c3');
for(var i=0; i<cbs.length; i++){
var flag = cbs[i].checked;
if(flag)
cbs[i].checked = false;
else
cbs[i].checked = true;
}
}
function getTestValue(){
alert($F('t1'));
}
</script>
</head>
<body>
<form id="f1" name="f1" action="" method="post">
first:<input type="checkBox" id="c1" value="c1" />
second:<input type="checkBox" id="c2" value="c2" />
thiird:<input type="checkBox" id="c3" value="c3" />
<input type="button" value="反选" onclick="antiSelect();" />
<hr />
<input type="text" value="hello world" id="t1" />
<input type="button" value="test" onclick="getTestValue();" />
</form>
</body>
</html>
12.6.2 ajax对象
示例12-6：用prototype实现ajax
源文件：prototypeAjax.html
<!DOCTYPE html>
<html>
<head>
<title>用prototype实现Ajax</title>
<Meta http-eqiuv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
function checkUser(){
var checkResult = $('checkResult');
checkResult.innerHTML = "正在检测用户名。。。";
var userName = $F('userName');
var url = "http://localhost:8080/08_ajax/D04_checkUserName.jsp?checkUserName=" + userName;
var pars = "";
var req = new Ajax.Request(url,{
method: 'get',parameters: pars,onComplete: handleRequest
});
}
function handleRequest(info){
$('checkResult').innerHTML = info.responseText;
}
</script>
</head>
<h1>Ajax的Prototype实现</h1>
<form id="regForm" name="regForm" action="D02_doRegister.jsp" method="post">
注册用户名：
<input type="text" id="userName" name="userName" onblur="checkUser();" />
<label id="checkResult"></label><br />
注册密码：<input type="password" id="password" name="password" /><br />
确认密码：<input type="password" id="password2" name="password2" /><br />
<input type="submit" value="提交" />
</form>
<body>
</body>
</html>
ajax使用总结-ajax的配置-ajax的调用-ajax的中文乱码-ajax的表单提交
·jquery的使用 0、必须优先引入jquery.js 否则无法调用jquery框架 1、js区分大小写，起名字的时候要注意 2、jquery根据div的id属性获取页面text的值：$("#demoID").val()，根据class属性获取页面text的值$(".demoCLASS").val(),如果是赋值$("#demoID").val("赋值的参数") 3、$(document).ready(function(){代码})、$().ready(function(){代码})、$(function(){代码})的含义一样 4、多个$(function(){代码})可以并存，即只要名字不重复可以同时发挥作用 5、$(function(){代码})的意思是页面加载完毕即运行，比如自动点击，自动弹框，再或者点击监听或者其他监听 6、加载完即点击和“点击的监听”的区别（非常有借鉴意义） 比如现在有一个js方法，function demoFunction(){alert("这个方法运行了");}; 加载完即点击：$("#demoid").click(demoFunction()); 加载完后即监听，这个方法只能是在按钮有click这个动作，或者通过jquery有click()动作：$("#demoid").click(function(){demoFunction()}); 7、如果是自动加载即运行的，或者需要被监听的都需要放置到$(document).ready(function(){代码})的代码中 8、window.onload=function(){代码}与$(function(){代码})的区别 ·调用函数的用法不同： window.onload = function(){代码}; $(function(){代码}) ·调用函数的时间不同 window.load=function(){代码}：必须等待网页中所有的内容加载完毕（包括图片）才能执行，比如要运用上传等功能。 $(function(){代码})，等到网页中所有的DOM结构绘制完毕后就可以执行。 9、AJAX专题 ·需要的jar包：commons-lang-2.5.jar、commons-lang3-3.1.jar、javassist-3.11.0.GA.jar ·前台js的写法：为了简化流程，写成页面加载即运行 $(document).ready(function(){ $.ajax({ url : "testajax.do",// 请求地址 //timeout : 600000,//超时时间设置，单位毫秒 async : false,// 异步 cache : false,// 缓存 type : 'post',// 请求方式 data: {"name":"123"},//data: $('#formid').serialize(),//序列化表单-当触发一个form表单提交的ajax事件的时候，这个序列化方法自动将数据转化围殴json格式传递给后台 dataType : 'json',// 服务器返回的数据类型 success : function(msg) {// 请求成功后调用的 alert("返回json的实验成功了"+" msg.resultcode="+msg.resultcode+" msg.name="+msg.name); },error :function(){ alert("异常"); } }); }); ·struts.xml文件的写法 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <!--略去一些struts2的配置信息--> <package name="myajax" extends="json-default" namespace="/"> <global-results> <result name="message" type="json"> <param name="root">message</param> </result> </global-results> <action name="*"method="{1}"> <result name="list">/index.jsp</result> </action> </package> <!-- 包含的其他配置文件 --> <include file="struts-method.xml"></include> </struts> ·后台java代码：仅距离调用ajax，故不涉及数据库操作 import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; public class AjaxTest { protected Map<String,Object> message = new HashMap<String,Object>(); /** AJAX请求返回RESULT的name常量*/ protected final static String MESSAGE = "message"; public Map<String,Object> getMessage() { return message; } public void setMessage(Map<String,Object> message) { this.message = message; } //-登录页面中form表单提交的路径 public String testajax() throws IOException{ System.out.println("获取参数name="+ServletActionContext.getRequest().getParameter("name")); message.put("resultcode","0000"); message.put("resultcode","0001"); message.put("name","zhong文ce试"); return MESSAGE; } } ·ajax的应用之提交form表单数据-表单数据自动转json格式 场景描述：当具体的提交信息为一个form表单，并通过ajax传递给后台时，我们通常使用一个叫序列化的方法将这个form表单转化为json格式传递给后台。 ·form表单的格式，form标签有id，input标签有name <form id="formid"> 姓名：<input type="text" name="name" value="张三"/><br> 年龄：<input type="text" name="age" value="12"/><br> <input type="submit" value="提交" id="submitid"/> </form> ·js部分的代码-可以单独写在一个js文件，注意，需要先引入jquery.js文件 $(document).ready(function(){ $("#submitid").click(function(){ajaxhere()}); }); //提交表单的ajax function ajaxhere(){ $.ajax({ url : "testajax3.do",// 请求方式 data: $('#formid').serialize(),//序列化表单 dataType : 'json',// 服务器返回的数据类型 //contentType:"application/x-www-form-urlencoded; charset=utf-8",success : function(msg) {// 请求成功后调用的 alert("form表单触发的实验成功了"+" msg.resultcode"+msg.resultcode+" msg.name="+msg.name); },error :function(){ alert("异常"); } }); }; ·传统的ajax返回方式，即java部分的返回写在流里-特别要注意这里的处理中文乱码的解决方式 HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); PrintWriter writer = response.getWriter(); String a = "{\"resultcode\":\"0000\",\"name\":\"文试\"}"; writer.write(a); writer.flush(); writer.close();
ajax的open和send
open方法创建一个请求，并准备向服务器发送，原型为：
open（method,url,async,user,password)
method(get,post)
url,请求地址
async 请求是同步还是异步，同步为true，异步为false，默认为true
user 指定请求的用户名，没有就省略
password 同上
send方法向服务器发送请求，原型如下：
send（body)
该方法只用一个body参数，
var body="username=jack&sex= male";
定义项服务器发送2个值，用&分隔开。
如果在open中指定的是get方法，则服务器端一般用request.querystring获取；如果是post方法，则服务器端一般使用request.form获取。
比起get方法，post方法需要设置请求的HTTP头，通过以下语句实现：
xmlhttp:setRequestHeader('Content-type','application/x-www-form-urlencoded');
在get方法中，提交的数据既可以放在请求的url中，也可以放在send方法中。而在post方法中所有数据都是通过send方法提交的。
关于基于Ajax的网站上的OpenGraph和ajax网站开发的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于10个基于Ajax的PHP Webmail客户端、12_基于ajax的程序开发、ajax使用总结-ajax的配置-ajax的调用-ajax的中文乱码-ajax的表单提交、ajax的open和send等相关内容，可以在本站寻找。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
