投稿
  1. 首页
  2. 服务器知识

html如何向服务器发送信息？

小夏•2023-4-26•服务器知识•阅读30

html如何向服务器发送信息？,第1张

Server-Sent 事件 - 单向消息传递Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。浏览器支持所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。接收Server-Sent 事件通知EventSource 对象用于接收服务器发送事件通知：实例var source=new EventSource("demo_sse.php")source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"}例子解释：创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）每接收到一次更新，就会发生 onmessage 事件当onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中检测Server-Sent 事件支持在上面的 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. } 服务器端代码实例为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

java socket客户端向服务器端发送消息，可以使用socket类，实例如下：

mport java.io.*

import java.net.*

public class EchoClient {

public static void main(String args[]) {

try {

Socket connection =new Socket("127.0.0.1", 5050)

BufferedReader input = new BufferedReader(new InputStreamReader(

connection.getInputStream()))

PrintWriter out = new PrintWriter(connection.getOutputStream(),true )

String info

info = input.readLine()

System.out.println(info)

boolean done = false

BufferedReader in = new BufferedReader(new InputStreamReader(System.in))

String sInput

//out.println("BYE")

while (!done) {

info = input.readLine()

System.out.println(info)

}

connection.close()

}

catch (SecurityException e) {

System.out.println("SecurityException when connecting Server!")

}

catch (IOException e) {

System.out.println("IOException when connecting Server!")

}

}

}

Ajax，很流行的

下面的代码请保存为html后调试，在关键的地方我已经用中文解释过了。调试时要注意：

1.把两个form的action=""里URL改成你要提交的页面，否则，post提交方法会出错。

2.把两个Form里的<input><select>等控件改成你要提交页面所必须的控件，现在的只是示例。

3.代码有点长，测试的时候要耐心，容易出错

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gbk">

<title>AJAX Form Submit Test</title>

<script>

function $(objId) {

return document.getElementById(objId)

}

function AjaxFormer (form, resultDivId) {

this.form = form

this.resultDivId = resultDivId

this.ajaxSubmitForm = function() {

var elements = form.elements// Enumeration the form elements

var element

var i

var postContent = ""// Form contents need to submit

for(i=0i<elements.length++i) {

var element=elements[i]

if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {

postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&"

}

else if(element.type=="select-one"||element.type=="select-multiple") {

var options=element.options,j,item

for(j=0j<options.length++j){

item=options[j]

if(item.selected) {

postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&"

}

}

} else if(element.type=="checkbox"||element.type=="radio") {

if(element.checked) {

postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&"

}

} else if(element.type=="file") {

if(element.value != "") {

postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&"

}

} else {

postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&"

}

}

this.ajaxSubmit(form.action, form.method, postContent, resultDivId)

}

this.ajaxSubmit = function(url, method, postContent, resultDivId)

{

var loadingDiv = document.getElementById('loading')

if(!loadingDiv) {

loadingDiv = document.createElement("div")

loadingDiv.id = "loading"

loadingDiv.style.border="1px solid #008800"

document.body.appendChild(loadingDiv)

}

// call in new thread to allow ui to update

window.setTimeout(function () {

loadingDiv.innerHTML = "<img src='./images/loading.gif'/>Loading...."

loadingDiv.style.display = ""

}, 1)

// code for Mozilla, etc.

if (window.XMLHttpRequest)

{

xmlhttp=new XMLHttpRequest()

}

// code for IE

else if (window.ActiveXObject)

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

}

if(xmlhttp) {

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState==4)

{

try {

if(xmlhttp.status==200) {

if(resultDivId) {

$(resultDivId).innerHTML = xmlhttp.responseText

//如果用的post的提交方法请改这里。上面一句是提交后的HTML语句，具体的请看下面get的修改方法

} else {

var result = document.createElement("DIV")

result.style.border="1px solid #363636"

result.innerHTML = xmlhttp.responseText

//如果用的get的提交方法请改这里（注意：上面用post提交方法的修改方法和这里的一样）。上面这一行是获取提交后页面HTML的语句，你可以把上面这句去掉，那么在页面上就不会出现结果页面了（不影响结果的判断）

//当你把上面那句改成：result.innerText = xmlhttp.responseText

//那显示的结果就是HTML语句了

//你可以在xmlhttp.responseText里查找登陆成功的字符串，比如登陆成功后往往会显示“登陆成功”，登陆失败会显示“密码不正确”

//那么用if(xmlhttp.responseText.indexOf("登陆成功") >0)来判断是否有“登陆成功”的字符就可以判断是否成功了

//下面注释掉的就是来判断是否登陆成功的，你按情况来改吧，运行的时候注意把注释符号去掉

/*

if(xmlhttp.responseText.indexOf("登陆成功") >0)

{

alert("登陆成功")

}

else

alert("登陆失败")

*/

//

document.body.appendChild(result)

}

if(xmlhttp.getResponseHeader("response_script")) {

eval(unescape(xmlhttp.getResponseHeader("response_script")))

}

loadingDiv.innerHTML =

"<img src='/images/good.gif'/>Submit finnished!"

}

else {

loadingDiv.innerHTML = "There is something wrong with form submit! ".fontcolor("red")

+ xmlhttp.status + "=" + xmlhttp.statusText

}

} catch(exception) {

loadingDiv.innerHTML = "There is something wrong with form submit! ".fontcolor("red")

+ exception

}

}

}

if(method.toLowerCase() == "get") {

xmlhttp.open("GET", url + "?" + postContent, true)

xmlhttp.send(null)

} else if(method.toLowerCase() == "post") {

xmlhttp.open("POST", url, true)

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

xmlhttp.send(postContent)

}

} else {

loadingDiv.innerHTML =

"Can't create XMLHttpRequest object, please check your web browser."

}

}

}

// }}} end of common utils methods

</script>

</head>

<body>

提交方式: POST<br>

<form method="POST" id="form1" name="form1"

action="http://www.baidu.com"

onSubmit="former.ajaxSubmitForm()return false">

<p><input type="hidden" name="hidden1" value="hiddenValue">

text:<input type="text" name="textf&1" size="20" value="text文本&1">

checkbox:<input type="checkbox" name="checkbox1" value="ON" checked>

radio:<input type="radio" value="V1" checked name="radio1">

select:<select size="1" name="select1">

<option selected value="option1">D1</option>

</select>

<br>

<br>

<input type="submit" name="B1" value="submit">

<input type="reset" name="B2" value="reset">

</p>

</form>

<br><br><br><br><br>

提交方式: GET<br>

<form method="GET" id="form2" name="form2"

action="http://www.baidu.com"

onSubmit="former2.ajaxSubmitForm()return false">

<p><input type="hidden" name="hidden1" value="hiddenValue">

text:<input type="text" name="text文本&2" size="20" value="text文本&2">

checkbox:<input type="checkbox" name="checkbox1" value="ON" checked>

radio:<input type="radio" value="V1" checked name="radio1">

select:<select size="1" name="select1">

<option selected value="option1">D1</option>

</select>

<br>

<br>

<input type="submit" name="B1" value="submit">

<input type="reset" name="B2" value="reset">

</p>

</form>

<div id="loading" style="display:noneposition:absolute

border:1px solid orangeheight:20pxwidth:600left: 93pxtop: 112px

background-color: #FFFFCCcursor:pointer" title="Click to hide" onClick="this.style.display='none'"></div>

<div id="resultDiv" style="border:1px solid orangebackground-color: #FFFFCCcursor:pointer" title="Click to hide" onClick="this.style.display='none'">

Form 1 的提交结果将会显示在这里.

</div>

<script type="text/javascript">

var former = new AjaxFormer($('form1'), 'resultDiv')

var former2 = new AjaxFormer($('form2'))

</script>

</body>

</html>

欢迎分享，转载请注明来源：夏雨云

原文地址:https://www.xiayuyun.com/zonghe/299814.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
小夏小夏管理员组
00
上一篇 2023-04-26
下一篇2023-04-26

发表评论

登录后才能评论

评论列表（0条）

    保存