Hello AJAX

"); window.frames["iframe963"].document.write(decodeHtml(code963)); window.frames["iframe963"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe963"]).load(function(){ $("#iframe963").height($("#iframe963").contents().find("body").height()+showittryitheight); }); $("#iframe963").height($("#iframe963").contents().find("body").height()+showittryitheight); alreadyWriteCode963 = code963; $("#rendering963").hide(); $("#rendered963").show(); } var tRereshRetry2DemoPanel963 = setInterval(rereshRetry2DemoPanel963,1000); var binded963 = false; $("textarea#stepcodeTextarea963").keyup(function(){ if(!binded963){ $(window).bind('beforeunload',function(){ binded963 = true; return "xxxx"; }); } var newCode = $(this).val() code963 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code963!=newCode){ // window.frames["iframe963"].document.write(""); // window.frames["iframe963"].document.write(decodeHtml($("textarea#stepcodeTextarea963").val())); // window.frames["iframe963"].document.close(); // $(window.frames["iframe963"]).load(function(){ // $("#iframe963").height($("#iframe963").contents().find("body").height()+showittryitheight); // }); // code963 = newCode; // } }); $(".tryButton963").click(function(){ $("#tryDiv963").show(); $("#stepcodeTextarea963").focus(); $("#stepcodeTextarea963").height(200); $("#iframe963").height(0); window.frames["iframe963"].document.write(""); window.frames["iframe963"].document.write(decodeHtml($("textarea#stepcodeTextarea963").val())); window.frames["iframe963"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe963"]).load(function(){ $("#iframe963").height($("#iframe963").contents().find("body").height()+showittryitheight); }); $("#iframe963").height($("#iframe963").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor963.focus(); editor963.setSize(null, "250"); $("#rendering963").hide(); $("#rendered963").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor963 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea963"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor963.on("change",function(doc){ if(!binded963){ $(window).bind('beforeunload',function(){ binded963 = true; return "xxxx"; }); } var newCode = doc.getValue(); code963 = newCode; $("textarea#stepcodeTextarea963").val(newCode); if(alreadyWriteCode963!=code963){ lastModifedTime963 = new Date().getTime(); $("#rendering963").show(); $("#rendered963").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor963 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor963.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv963").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text">  
<span id="checkResult"></span>
 
<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "http://127.0.0.1/study/checkName.jsp?name="+name;
 
  xmlhttp =new XMLHttpRequest(); 
  xmlhttp.onreadystatechange=checkResult; //响应函数
  xmlhttp.open("GET",url,true);   //设置访问的页面
  xmlhttp.send(null);  //执行访问
}
 
function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
  
}
 
</script>

试一下

源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 <span>输入账号 :</span> <input id="name" name="name" onkeyup="check()" type="text"> <span id="checkResult"></span> <script> var xmlhttp; function check(){ var name = document.getElementById("name").value; var url = "http://127.0.0.1/study/checkName.jsp?name="+name; xmlhttp =new XMLHttpRequest(); xmlhttp.onreadystatechange=checkResult; //响应函数 xmlhttp.open("GET",url,true); //设置访问的页面 xmlhttp.send(null); //执行访问 } function checkResult(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById('checkResult').innerHTML=xmlhttp.responseText; } </script>

渲染中 渲染完成 效果

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>

<%
	String name = request.getParameter("name");
	
	if("abc".equals(name))
	    out.print("<font color='red'>已经存在</font>");
	else 
		out.print("<font color='green'>可以使用</font>");
	
%>

Hello AJAX