Heim > Artikel > Web-Frontend > Einführung und Verwendung von Ajax und jQuery
Verstehen Sie Ajax, XMLHttpRequest, verwenden Sie JQuery, um Ajax zu implementieren, verarbeiten Sie Antwortdaten im JSON-Format und verwenden Sie natives JavaScript, um Ajax zu implementieren
3. Die Arbeit von Ajax Die Prozessbenutzeroberfläche sendet über JavaScript eine http-Anfrage an Ajax --- der Server (verarbeitet die Anfrage)
und gibt dann die XML/JSON/HTML-Daten an Ajax zurück Engine und kehrt dann über dom+css zur Benutzeroberfläche zurück
4.XMLHttpRequest bietet die Möglichkeit, Anfragen asynchron zu senden
Gemeinsame Methoden
open(String method, String url, boolean async) erstellt eine neue HTTP-Anfrage,
send(String data ) Senden Sie eine Anfrage an den Server,
setRequestHeader(String header, String value), um bestimmte HTTP-Header-Informationen festzulegen Anfrage,
5. Die meisten alten Versionen von IE-Browsern und neue Versionen Die Erstellung von XMLHttpRequest durch Browser ist unterschiedlich
6. Ereignis onreadystatechange: Rückruffunktion
2. Praktischer Teil
1. Implementierung der Überprüfung, ob das Postfach des registrierten Benutzers vorhanden ist (verwenden Sie das ursprüngliche Ecological-JavaScript, das Ajax implementiert)
Der Code im Servlet lautet wie folgt
<div style="left: 2200px;"><form action="" method="get"> 注册邮箱:<input type="text" id="email" onblur="checkemail()" ><label id="samp">*</label><br/><br/> 用户名:<input type="text">*<br/><br/> 密码:<input type="password">*<br/><br/> 确认密码:<input type="password">*<br/><br/> <div style="margin-left: 100px;"><input type="submit" value="注册"></div> </form> <script type="text/javascript" language="JavaScript"> function checkemail() { //alert("hnjkl"); //创建XMLHttpRequest对象 if(window.XMLHttpRequest){//返回true时说明是新版本IE浏览器或其他浏览器 xmlHttpRequest=new XMLHttpRequest(); }else{//返回false时说明是老版本IE浏览器 xmlHttpRequest=new XMLHttpRequest("Microsoft.XMLHTTP"); }//设置回调函数 xmlHttpRequest.onreadystatechange=callBack;//获取用户名文本框的值 var email=$("#email").val();//初始化XMLHttpRequest组件 var url="userServlet?email="+email;//服务器端URL地址,name为用户名文本框的值 xmlHttpRequest.open("GET",url,true);//发送请求 xmlHttpRequest.send(null);//回调函数callBack()中处理服务器响应的关键代码 function callBack(){ if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ var date=xmlHttpRequest.responseText; if(date=="true"){ $("#samp").html("邮箱已被占用");//samp为显示消息的samp的id }else{ $("#samp").html("邮箱可注册"); } } } } </script></div>2. Verwenden Sie die Methode $.ajax(), um asynchron zu prüfen, ob die registrierte E-Mail-Adresse bereits vorhanden ist
package web; import java.io.IOException;import java.io.PrintWriter; import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse; public class userServlet extends HttpServlet{ @Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubrequest.setCharacterEncoding("UTF-8");boolean emailCheck=false;String email=request.getParameter("email");if("22@qq.com".equals(email)){emailCheck=true;}else {emailCheck=false;}response.setContentType("text/html;charset=UTF-8");PrintWriter out=response.getWriter();out.print(emailCheck);out.flush();out.close();} @Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubrequest.setCharacterEncoding("UTF-8");this.doGet(request, response);}}3. Zeigen Sie JSON-Daten mit allgemeinen Seitenelementen an
<div style="left: 2200px;"><form action="" method="get"> 注册邮箱:<input type="text" id="email" onblur="checkemail()" ><label id="samp">*</label><br/><br/> 用户名:<input type="text">*<br/><br/> 密码:<input type="password">*<br/><br/> 确认密码:<input type="password">*<br/><br/> <div style="margin-left: 100px;"><input type="submit" value="注册"></div> </form> <script type="text/javascript" language="JavaScript"> function checkemail(){ var email=$("#email").val(); $.ajax({ "url" :"userServlet", "type" :"get", "data" :"email="+email, "dataType" :"text", "success" :callBack, "error" :function () { alert("出现错误"); } }); function callBack(data) { if(data=="true"){ $("#samp").html("邮箱已被占用");//samp为显示消息的samp的id }else{ $("#samp").html("邮箱可注册"); } } } </script></div>//2. Dropdown-Feld
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'workthree.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css?1.1.11">--><script type="text/javascript" src="js/jquery-1.8.3.js?1.1.11"></script> <script type="text/javascript"> $(document).ready(function(){ var personary=["大东-河南省周口13838381438市-","小顺-广东省xx市"]; var person=[{"id":"1001","name":"大东","address":"河南省周口市","phone":"13838381438"}, {"id":"1002","name":"小圳","address":"湖南省xx市","phone":"13838381438"}, {"id":"1003","name":"小顺","address":"广东省xx市","phone":"13838381438"}, {"id":"1004","name":"小莫","address":"河北省xx市","phone":"13838381438"}]; var $divv=$("#con"); var $table=$(" <table border='1' ></table>").append("<tr><td>ID</td><td>姓名</td><td>住址</td><td>手机</td></tr>"); $divv.append($table); $(person).each(function(){ $table.append("<tr><td>"+this.id+"</td><td>" +this.name+"</td><td>" +this.address+"</td><td>" +this.phone+"</td></tr>"); });
var $ary=$(personary);//var $ul=$("#arul");var $sel=$("#arse");$ary.each(function(i) { $sel.append("<option value='"+(i+1)+"'>"+this+"</option>"); }); }); </script> </head> <body> <div id="con"> </div><div id="conn"><select id="arse"></select></div> </body></html>
//Diese Seite wird nicht hochgeladen. Wenn Sie den vollständigen Projektcode benötigen, können Sie ihn in der Sogou-Suche auf csdn finden (Accp8.0-Konvertierungslehrbuch Nr. Kapitel) kann heruntergeladen werden
/ /Das Wichtigste ist js
5. Verwenden Sie JSON in Ajax, um die Theme-Verwaltungsseite zu generieren //Auf dem Computer 4中/** * Created by Administrator on 2017/7/4. */$(function(){ $.ajax({"url":"userServlet2","type":"POST","data":"por=user","dataType":"json","success":callBack}); $("#news").click(function(){ initnews(); }); $("#topics").click(function(){ inittopics(); });}); function callBack(data){var $data=$(data);var $userul=$("#userul");$data.each(function(){$userul.append("<li>"+this.naem+" "+this.pwd+" <a href=''>修改</a> <a href=''>删除</a></li>");});}function initnews(){$.ajax({ "url":"userServlet2", "type":"POST", "data":"por=news", "dataType":"json", "success":callNews });function callNews(news){//alert("ddd");var $userul=$("#userul").empty();for(var i=0;i<news.length;){$userul.append("<li>"+news[i].title+" "+news[i].author+" <a href=''>修改</a> <a href=''>删除</a></li>");i++;if(i==news.length){break;}}}}function inittopics(){$.ajax({ "url":"userServlet2", "type":"POST", "data":"por=top", "dataType":"json", "success":callTopics });function callTopics(top){var $userul=$("#userul").empty();for(var i=0;i<top.length;){//alert("ddd");$userul.append("<li>"+top[i].topics+" <a href=''>修改</a> <a href=''>删除</a></li>");i++; if(i==top.length){break;}}}} //servlet代码 package web; import java.io.IOException;import java.io.PrintWriter;import java.util.List; import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse; import dao.newlist;import dao.topdao;import daoImpl.newlistimpl;import daoImpl.topimpl;import entity.news;import entity.top; public class userServlet2 extends HttpServlet{ @Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stub//doPost(request, response);} @Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stub request.setCharacterEncoding("UTF-8");String por=request.getParameter("por");if(por.equals("news")){newlist nd=new newlistimpl();List<news> listnews=nd.allnewslist();StringBuffer newssub=new StringBuffer("[");for(int i=0;;){news n=listnews.get(i);newssub.append("{\"title\":\""+n.getNtitle()+"\",\"author\":\""+n.getAuthour()+"\"}");i++;if(i==listnews.size()){break;}else{newssub.append(",");}}newssub.append("]");response.setContentType("text/html;charset=UTF-8");PrintWriter out=response.getWriter();out.print(newssub);out.flush();out.close();}else if(por.equals("top")){topdao nd=new topimpl();List<top> listtop=nd.alltop();StringBuffer topsub=new StringBuffer("[");for(int i=0;;){top top=listtop.get(i);topsub.append("{\"topics\":\""+top.getTcontent()+"\"}");i++;if(i==listtop.size()){break;}else{topsub.append(",");}}topsub.append("]");response.setContentType("text/html;charset=UTF-8");PrintWriter out=response.getWriter();out.print(topsub);out.flush();out.close();}}}
V Teil
1. Traditionelle Webentwicklungstechnologie sendet Anfragen über den Browser und Ajax sendet sie über das xmlhttprequest-Objekt von JavaScript
Die traditionelle Antwort ist eine vollständige Seite und JavaScript gibt die erforderlichen Daten zurück
2. Schlüsselelemente von Ajax
→JavaScript-Sprache: die Hauptentwicklungssprache der Ajax-Technologie
→XML/JSON/HTML: verwendet Kapseln von Daten
→DOM (Dokument Objektmodell): Seitenelemente ändern
→CSS: Stil ändern
→Ajax-Engine: XMLHttpRequest-Objekt
Das obige ist der detaillierte Inhalt vonEinführung und Verwendung von Ajax und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!