Home >Web Front-end >JS Tutorial >Detailed steps to update data without refreshing using javascript asp_javascript skills

Detailed steps to update data without refreshing using javascript asp_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:22:281658browse

In programming, we often encounter a situation where it is impossible to know in advance what data the user will need. The data must be re-extracted from the server based on the user's selection and fed back to the user. For example, in a simple case, after the user selects a province, we will immediately redisplay all the cities in the province in the city. In this case, it is generally necessary to refresh the entire page before re-reading it, but this is not only inefficient but also inelegant. In fact, by using JavaScript combined with the XMLHTTP object of Microsoft, we can read the data from the server "slightly" without refreshing, which looks both professional and efficient.
Below we will demonstrate this technology in a case of verifying whether the user is registered.
'Program design: Global Wanwei, a professional virtual host and domain name registration service provider
'Website: http://www.netInter.cn
'This program is Global Wanwei's original program, so if you If you need to reprint, please indicate the source, thank you.
'The above information is an integral part of the article text, so if you want to reprint this article, you must keep the above information.

1. First create a CheckUser.asp file on the server for Detect whether the user exists, and feedback 0 and 1 respectively according to whether the user exists
u_name=Request.QueryString("u_name")
if u_name exists then
Response.write "0"
else
Response.write "1"
end if
2. Client-side HTML design:
1. JavaScript code


2. HTML form design:





<script> <BR>function check_user_exists(form){ <BR>u_name=form.u_name.value; <BR>if (u_name==null||u_name==''){ <BR>alert("请您输入用户名"); <BR>return false; <BR>} <BR>infoBoard=document.getElementById("checkInfo"); <BR>infoBoard.innerText='查询中...'; <BR>myurl=location.protocol+"//"+location.hostname+"/CheckUser.asp?u_name="+u_name; <BR>retCode=openUrl(myurl); <BR>switch(retCode){ <BR>case "-2": <BR>infoBoard.innerHTML='<font color=red>抱歉,查询失败';break; <BR>case "1": <BR>infoBoard.innerHTML='<font color=red>恭喜,'+u_name+'可以使用';break; <BR>case "0": <BR>infoBoard.innerHTML='<font color=red>抱歉,用户名'+u_name+'已经被使用'; <BR>} <BR>return; <BR>} <br><br>function openurl(/url){ <BR>var objxml=new ActiveXObject("Microsoft.XMLHttp") <BR>objxml.open("GET",url,false); <BR>objxml.send(); <BR>retInfo=objxml.responseText; <BR>if (objxml.status=="200"){ <BR>return retInfo; <BR>} <BR>else{ <BR>return "-2"; <BR>} <BR>} <BR></script>After the above three steps, a data update program that does not require page refresh is completed (demo address: http:/ /www.web9898.cn/reg), according to this method, you can realize many cool applications:)
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn