Ajax와 jQuery의 소개와 활용-JS 튜토리얼-php.cn

Ajax, XMLHttpRequest를 이해하고, jquery를 사용하여 ajax를 구현하고, 응답 데이터를 json 형식으로 처리하고, 기본 JavaScript를 사용하여 ajax를 구현합니다

1. 기타 참고사항

1. 기존 웹 기술과 Ajax의 요청 방법이 다릅니다. 필수 요소만 가져옵니다. 기존의 모든 새로 고침

2. ajax의 전체 이름은 "Asynchronous Javascript And XML"(비동기 JavaScript 및 XML)입니다.

3 ajax의 워크플로 사용자 인터페이스는 ajax로 http 요청을 보냅니다. -- 서버 (요청 처리)

그런 다음 xml/json/html 데이터를 ajax 엔진에 반환하고 dom+css를 통해 사용자 인터페이스로 돌아갑니다

4.XMLHttpRequest는 요청을 비동기적으로 보내는 기능을 제공합니다

일반적인 방법

open(String method, String url, boolean async)은 새로운 HTTP 요청을 생성하고,

send(String data)는 요청을 서버로 보내고,

setRequestHeader(String header, String value)는 특정 HTTP 헤더 정보를 설정합니다.

5. IE 브라우저의 이전 버전과 IE 브라우저의 새 버전 대부분의 브라우저는 XMLHttpRequest를 다르게 생성합니다.

6. 이벤트 onreadystatechange: 콜백 함수

2. 실습 부분

1. 등록된 사용자의 이메일이 존재합니다. (네이티브 JavaScript를 사용하여 ajax 구현) 서블릿에

<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>

로그인 후 복사

코드는 다음과 같습니다

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

로그인 후 복사

2 등록된 이메일 주소가 이미 존재하는지 비동기적으로 확인하려면 $.ajax() 메소드를 사용하세요

<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>

로그인 후 복사

3. 공통 페이지 요소로 JSON 데이터 표시

<%@ 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>");                });

로그인 후 복사

//2. 드롭다운 상자

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>

로그인 후 복사

4. ajax에서 JSON을 사용하여 관리자 뉴스 관리 페이지를 생성합니다

//페이지가 표시되지 않습니다. 여기에 업로드된 전체 프로젝트 코드는 Sogou 검색을 통해 csdn에서 찾을 수 있습니다(accp8.0 변환 교과서 X장) 다운로드

//가장 중요한 것은 js

/** * 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();}}}

로그인 후 복사

5. ajax에서 JSON을 사용합니다. 테마 관리 페이지 생성

//컴퓨터에서 4

5. 요약 부분

1. 브라우징을 통한 전통적인 웹 개발 기술 서버는 요청을 보내고 ajax는 이를 JavaScript의 xmlhttprequest 객체를 통해 보냅니다

전통적인 응답은 완료됩니다. 페이지와 JavaScript는 필요한 데이터를 반환합니다

2. Ajax의 핵심 요소

→JavaScript 언어: Ajax 기술의 주요 개발 언어

→ XML/JSON/HTML: 데이터를 캡슐화하는 데 사용됨

→DOM(Document Object Model) : 페이지 요소 수정

→CSS: 스타일 변경

→Ajax 엔진: XMLHttpRequest 객체