How to write a map through database and ajax method

This article mainly shows you "how to write a map through the database and ajax method", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to write a map through the database and ajax method" this article.

Ajax tutorial

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

AJAX is not a new programming language, but a new way to use existing standards.

AJAX is the art of exchanging data with the server and updating parts of the web page without reloading the entire page.

Client part: html, js, css code part:

.content _ map {/ * border:1px solid blue;*/width:1349px;height:524px;float:left;margin-top:100px;} .content_map .mLeft {border:none;border-top:1px solid # fb6c20;width:400px;margin-top:14px;float:left;margin-left:134px;} .content_map > span {margin-left:20px;margin-right:20px;font-size:28px;font-family: "Microsoft Yahei"; / * font-weight: bold;*/float:left }. Content_map .mRight {float:left;border:none;border-top:1px solid # fb6c20;width:400px;margin-top:14px;} # maplist {margin-top:50px;width:749px;height:524px;/*border:1px solid # fb6c20;*/background: url ("images/diru.png") no-repeat 00; background-size:contain;position: relative;float:left;}. MapShop img {position:absolute;/*border:1px solid red;*/} # map_right {/ * border:1px solid # fb6c20 * / float:left;/*width:600px;*/width:594px;height:524px;background-color: # f0f2mitfeMargaret float:left;/*width:600px;*/width:594px;height:524px;background-color top: 40px;} .shopMsg img {width:450px;height:300px;margin-left:72px;margin-top:40px;} .shopMsg .pmname {color:#000;font-size:20px;margin-top:30px;margin-left:72px;font-family: Microsoft Jahr;} .shopMsg .address {color:#000;font-size:20px;margin-top:30px;margin-left:72px Font-family: Microsoft shopMsg;}. Phone {color:#000;font-size:20px;margin-top:30px;margin-left:72px;font-family: Microsoft Yahi;} related pet hospital

Pet shop name: Petjoy Pet Community address: 1258 Jixuan Road, Changning District-1260 Tel: (021) 53018000_window.onload=function () {getMap ();} / add information to the map: ajaxfunction getMap () {/ / create object var httpReq;if (window.XMLHttpRequest) {httpReq=new XMLHttpRequest ();} else {httpReq=new ActiveXObject ("Microsoft.XMLHTTP");} var maplist=document.getElementById ("maplist"); / get map list maplist [XSS _ clean] ='' / / clear the information added to the html in the map / / define the callback function to receive the data from the database response. / / onreadystatechange (): stores the function (or function name). Whenever the readyState property changes, the function httpReq.onreadystatechange=function () {if (httpReq.readyState==4&&httpReq.status==200) {var jsonobj=JSON.parse (httpReq.responseText); console.log (jsonobj.length); for (var I = 0; I) is called.

< jsonobj.length;i++) {maplist[xss_clean]+=''+'

'+'