开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > Ajax > 查看源码
bbs.js
资源名称：Ajax.rar　[点击查看]
上传用户：shjgzm
上传日期：2017-08-31
资源大小：2757k
文件大小：4k
源码类别：

Ajax

开发平台：

Java

bbs.js：源码内容
  1. var xmlHttp;                        //用于保存XMLHttpRequest对象的全局变量
  2. var username;                       //用于保存姓名
  3. var title;                          //用于保存标题
  4. var content;                        //用于保存内容
  5. var threadid;                       //用于保存主题编号
  7. //用于创建XMLHttpRequest对象
  8. function createXmlHttp() {
  9.     //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
  10.     if (window.XMLHttpRequest) {
  11.        xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
  12.     } else {
  13.        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
  14.     }
  15. }
  17. //提交回帖到服务器
  18. function submitPost() {
  19.     //获取帖子中姓名、标题、内容、主题编号四部分信息
  20.     username = document.getElementById("username").value;
  21.     title = document.getElementById("post_title").value;
  22.     content = document.getElementById("post_content").value;
  23.     threadid = document.getElementById("threadid").value;
  25.     if (checkForm()) {
  26.         displayStatus("正在提交……");                      //显示提示信息
  28.         createXmlHttp();                                    //创建XMLHttpRequest对象
  29.         xmlHttp.onreadystatechange = submitPostCallBack;    //设置回调函数
  30.         xmlHttp.open("POST", "bbs_post.jsp", true);         //发送POST请求
  31.         //设置POST请求体类型
  32.         xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  33.         xmlHttp.send("username=" + encodeURI(username) + 
  34.                      "&title=" + encodeURI(title) + 
  35.                      "&content=" + encodeURI(content) + 
  36.                      "&threadid=" + threadid);              //发送包含四个参数的请求体
  37.     }
  38. }
  40. //检查表单是否内容已填写完毕
  41. function checkForm() {
  42.     if (username == "") {
  43.         alert("请填写姓名");
  44.         return false;
  45.     } else if (title == "") {
  46.         alert("请填写标题");
  47.         return false;
  48.     } else if (content == "") {
  49.         alert("请填写内容");
  50.         return false;
  51.     }
  52.     return true;
  53. }
  55. //获取查询选项的回调函数
  56. function submitPostCallBack() {
  57.     if (xmlHttp.readyState == 4) {
  58.         createNewPost(xmlHttp.responseText);
  59.         hiddenStatus();
  60.     }
  61. }
  63. //创建新的回帖
  64. function createNewPost(postId) {
  65.     //清空当前表单中各部分信息
  66.     document.getElementById("post_title").value = "";
  67.     document.getElementById("post_content").value = "";
  68.     document.getElementById("username").value = "";
  70.     var postDiv = createDiv("post", "");    //创建回帖的外层div
  71.     postDiv.id = "post" + postId;           //给新div赋id值
  73.     var postTitleDiv = createDiv("post_title", title + " [" + username + "]");  //创建标题div
  74.     var postContentDiv = createDiv("post_content", "<pre>" + content + "</pre>");    //创建内容div
  75.     postDiv.appendChild(postTitleDiv);                          //在外层div追加标题
  76.     postDiv.appendChild(postContentDiv);                        //在外层div追加内容
  78.     document.getElementById("thread").appendChild(postDiv);     //将外层div追加到主题div中
  79. }
  81. //根据className和text创建新的div
  82. function createDiv(className, text) {
  83.     var newDiv = document.createElement("div");
  84.     newDiv.className = className;
  85.     newDiv.innerHTML = text;
  86.     return newDiv;
  87. }
  89. //显示提示信息div
  90. function displayStatus(info) {
  91.     var statusDiv = document.getElementById("statusDiv");
  92.     statusDiv.innerHTML = info;
  93.     statusDiv.style.display = "";
  94. }
  96. //隐藏提示信息div
  97. function hiddenStatus() {
  98.     var statusDiv = document.getElementById("statusDiv");
  99.     statusDiv.innerHTML = "";
  100.     statusDiv.style.display = "none";
  101. }