Ajax教程

Ajax=异步JavaScript和XML(异步JavaScript和XML)。

AJAX不是一种新的编程语言，而是一种使用现有标准的新方式。

AJAX是一种与服务器交换数据并更新一些网页而无需重新加载整个页面的艺术。

客户端部分：html、js、css代码部分：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头标题/title meta charset=' UTF-8 '/头！- css样式部分- style type='text/css ' .content_map{/*border:1px纯蓝；*/width :1349 px；height :524 pxfloat : leftmargin-top :100 px；}.内容_地图mLeft { border : none border-top :1 px实心# fb6c20宽度宽度：400 pxmargin-顶部：14 pxfloat:left左边距left:134px}。content _ map span { margin-left :20 px；右边距：20 pxfont-size :28 px字体系列： '微软雅黑；/*font-weight:粗体；*/float :左侧；}.内容_地图mrlight { float : leftborder : one border-top :1 px实心# fb6c20宽度宽度：400 pxmargin-顶部：14 px} #地图列表{ margin-top :50 px；宽度宽度：749像素宽度：524像素/*边框：1像素实心# fb6c 20 */背景： URL(' images/diru。png ')无重复0 0；背景尺寸尺寸：容器相对位置：float:left}。mapShop img { position :绝对值；/*border:1px纯红；*/}#map_right{/*border:1px实心# fb6c 20 */左浮动：/*宽度宽度：600 px */宽度：594 px高度：524px背景-color : # f0f 2fe；边距-top : 40px；}.shopMsg img { width:450px高度：300 px边距-左侧：72 px页边距-顶部：40像素；}.商店消息.pm name { color : # 000 font-size :20 px；页边距-顶部：30 px边距-左侧：72 px字体系列：微软雅黑；}.商店消息.地址{ color : # 000 font-size :20 px；页边距-顶部：30 px边距-左侧：72 px字体系列：微软雅黑；}.商店消息.电话{ color : # 000 font-size :20 px；页边距-顶部：30 px边距-左侧：72 px字体系列：微软雅黑；}/stylebody！- html部分- div class='content_map '！-标题- hr class='mLeft'/span相关宠物医院/spanhr class='mRight'/！-左边部分：地图- div id='maplist'/div！-右边部分点击左边要添加的内容：以及最开始加入的信息-div id=' map _ right ' div class=' shopMsg ' img src=' http : images/w _ map。png '/div class=' pm名称'宠物店名：彼得乔伊宠物社区/divdiv class='address '地址：长宁区机旋路1258号- 1260号/divdiv class='phone '电话号码(021)53018000/div/div/div！射流研究…代码部分-脚本类型=' text/JavaScript '窗口。onload=function(){ GetMap()；}//向地图添加信息：ajaxfunction getMap(){//创建对象var httpReqif(窗口. XMLHttpRequest){ Httpreq=new XMLHttpRequest()；} else { Httpreq=新ActiveX对象(' Microsoft .XMLHTTP’)；} var映射列表=文档。getelementbyid('映射列表')；//获取地图列表maplist.innerHTML=//清空地图里在超文本标记语言里面加的信息//定义回调函数，接收从数据库响应回来的数据//onreadystatechange():存储函数（或函数名)。

每当readyState属性改变时，就会调用该函数http请求。onreadystatechange=function(){ if(Httpreq。readystate==4 Httpreq。status==200){ var jsonobj=JSON。解析(Httpreq。response text)；控制台。日志(jsonobj。长度)；for(var I=0；I jsonobj . LengTii){ maplist。inner html=' div class=' Mapshop ' ' ' img src=' http : images/fi1。png ' style=' top : ' jsonobj[I].pmTop“px”；left:' jsonobj[i].pmLeft ' px ' '/' div id=' pm city ' I ' ' onclick=' Getmessage(' I ')' style=' top : ' jsonobj[I].pmTop“px”；left:' jsonobj[i].pmLeft“px”；位置：绝对；填充-顶部：20像素' jsonobj[i].pmCity '/div ' '/div '；}}}//发起请求（打开一个地址)httpReq.open('get '，' adress.do '，true)；//发送，如果提交方式为去拿，发送为空如果提交方式为帖子，哪派遣里写要发送的参数，没得的话，就写nullhttpreq。发送(null)；}//点击获取信息函数getMessage(a){控制台。日志(' M-1 ')；var httpReqif(窗口. XMLHttpRequest){ Httpreq=new XMLHttpRequest()；} else { Httpreq=新ActiveX对象(' Microsoft .XMLHTTP’)；} var map _ right=document。getelementbyid(' map _ right ')；map _ right.innerHTML=http请求。onreadystatechange=function(){ if(Httpreq。readystate==4 Httpreq。status==200){ var jsonobj=JSON。解析(Httpreq。response text)；控制台。日志(jsonobj。长度)；for(var I=0；ijsonobj . LengiI){ map _ right。innerhtml=' div class=' shopMsg ' ' ' img src=' http : images/' jsonobj[I].pmImg ''/' 'div class='pmname '宠物店名：' jsonobj[i].pmName/' div ' ' div class=' address '地址：' jsonobj[i].pmAddress '/div ' div class=' phone '电话号码：' jsonobj[i].pmPhone '/div' '/div'}}}//发起请求httpReq.open('get '，' adressMsg.do？pmId=' a，true)；//发送http请求。发送(null)；}/脚本/正文/html服务端部分：app.js(一个JavaScript):

var express=require(' express ')；//引用express var MySQL=require(' MySQL ')；//引用mysqlvar app=express()；//执行表达里的全局函数，返回一个表达对象app。configure(function(){ app。使用(app。路由器)；//路由，配置路由时，先执行，用户定义的拦截地址app。使用(快递。static(_ _ dirname '/public ')；//设置静态资源路径app。使用(快递。错误处理程序())；//开发者模块，将错误显示在超文本标记语言上});app.get('/adress.do '，函数(req，RES){//console。日志(' d-1 ')；//建立数据库连接，建立桥梁var my KNN=MySQL。创建连接({ host : ' localhost '，port:'3306 '，user:'root '，password:'123456 '，数据库： ' pet ' })；//打开连接我的KNN。connect()；var SQL=' SELECT * FROM pet map//控制台。日志(SQL)；我的KNN。查询(SQL，[]，函数(err，data){//控制台。日志(err)；//console.log(数据);res.send(数据);});//关闭连接我的KNN。end()；});//城市点击响应app.get('/adressMsg.do '，函数(req，RES){ var PMid=req。查询。PMid控制台。日志(PMid)；//建立数据库连接，建立桥梁var my KNN=MySQL。创建连接({ host : ' localhost '，port:'3306 '，user:'root '，password:'123456 '，数据库： ' pet ' })；//打开连接我的KNN。connect()；控制台。log(' f-1 ')；var SQL=' SELECT * FROM petmap WHERE PMid=？控制台。日志(SQL)；var id=ParSeint(PMid)；我的KNN。查询(SQL，[id 1]，函数(错误，数据){控制台。日志(err)；console.log(数据);res.send(数据);});//关闭连接我的KNN。end()；});//监听端口号app.listen(8888，function(){//监听console.log('express监听成功！');控制台。log(_ _ dirname)；});数据库关系型数据库信息：

/* CREATE DatabaSe:pet */CREATE DatabaSe pet；/*宠物店地图*/CREATE TABLE petmap(/*宠物店*/pmid int auto _ increment主键，/*宠物店id*/pmName NVARCHAR(60)、/*宠物店名称*/pmCity NVARCHAR(20)、/*宠物店城市*/pmAddress NVARCHAR(100)、/*宠物店详细地址*/pmImg VARCHAR(60)、/*宠物店图片*/pmPhone VARCHAR(30)、/*宠物店电话号码*/pmTop FLOAT、/*以上宠物店位置pm左)值('邛崃林美多宠物服务部'，'成都'，成都市邛崃市昌松路296号，' Map1.png '，' 15202891690 '，360，320)，('和谐宠物医院'，'德阳'，'德阳市旌阳区珠江西路300号'，' Map2.png '，' 080' Map3.png '，' 028-81836050 '，260，240)，('冲康美动物医院0851-88275946 '，400，380)，('常德市武陵区动物医院'，'常德'，'常德市武陵区青年路478号'，' map9.png '，' 0736-7236814 '，230，393)，0371-69193157 '，300，453)，('长沙王波宠物诊所'，'长沙'，'长沙市天心区西派楼街41号附近'，'插入宠物地图(pm姓名、pm城市、pm地址、pm img、pm电话、pm top、pm left)值(‘乖乖宠物医院’，‘天津’，‘天津市河东区万东路77号(8630医院附近)’，‘map13 . png’，‘13820105131’。510)，(‘北京宠物医院’，‘北京’，‘北京市西城区百万庄北里14号’，Map14。PNG '，' 010-88377484 '，198，490 '，('宠物之家宠物医院'，'哈尔滨'，'哈尔滨市南岗区丁鑫'插入宠物地图(pm名称，pm城市，pm地址，pm img，pm电话，pm顶部，pm左侧)值('拉萨妙妙安信宠物诊所'，'西藏'，'拉萨市城关区金纳路东工商一楼'，' Map16.png '，' 0891-6223291 '，360最终结果：

以上是边肖介绍的通过数据库和ajax编写地图的示例代码，对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你，非常感谢你对我们网站的支持！