Einführung und Verwendung von Ajax und jQuery-js-Tutorial-php.cn

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

1 Die Web-Technologie und die Anforderungsmethode von Ajax sind unterschiedlich. Ajax erhält nur alle erforderlichen Elemente

2. Der vollständige Name von Ajax ist „Asynchronous Javascript and XML“ (Asynchrones JavaScript und XML).

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>

Nach dem Login kopieren

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);}}

Nach dem Login kopieren

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>

Nach dem Login kopieren

//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 &#39;workthree.jsp&#39; 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=&#39;1&#39; ></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>");                });

Nach dem Login kopieren

4. Verwenden Sie JSON in Ajax, um die Administrator-News-Verwaltungsseite zu generieren

var $ary=$(personary);//var $ul=$("#arul");var $sel=$("#arse");$ary.each(function(i) {                    $sel.append("<option value=&#39;"+(i+1)+"&#39;>"+this+"</option>");                });        });    </script>  </head>  <body>
<div id="con">
</div><div id="conn"><select id="arse"></select></div>  </body></html>

Nach dem Login kopieren

//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=&#39;&#39;>修改</a>  <a href=&#39;&#39;>删除</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=&#39;&#39;>修改</a>  <a href=&#39;&#39;>删除</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=&#39;&#39;>修改</a>  <a href=&#39;&#39;>删除</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();}}}

Nach dem Login kopieren

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!