jQuery AJAX简单应用

来源：互联网发布：上交所网络投票系统编辑：程序博客网时间：2024/06/07 01:41

简介

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

发送数据到服务器

默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

数据类型

（1）$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。

（2）通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

（3）和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，

（4）如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。

（5）如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。

基本语法

封装属性

需要封装的属性包括：

类型：type

地址：url

是否同步：async

参数：data

请求数据类型：dataType

请求成功回调函数：success

请求失败回调：error

这里写图片描述

框架分析

属性说明常用的属性包括type、url、async、data、dataType、jsonp、success、errortype请求类型，取值包括：post/geturl请求连接地址async是否异步执行，取值包括：true/false(同步/异步)data请求的参数，格式：param=value¶m=valuedataType响应值类型，取值包括：xml/html/script/json/jsonp/textjsonp跨域请求时候，重置请求回调函数名称success/error响应成功需要执行的回调函数/相应失败需要执行的回调函数

简单应用

客户端

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="jquery-3.2.1.min.js"></script></head><body><script>    $(document).ready(function () {        var data = {            type:"get",            url:"Servlet",            async:true,            data:"name=cgt&psd=123",            dateType:"json",            success:function (data) {                console.log("收到数据:"+data);            },            error:function () {                console.log("出问题了");            }        };        $.ajax(data);    })</script></body></html>

服务器端

package com.test.servlet;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;/** * Created by cgt on 2017/6/3. */@WebServlet("/Servlet")public class Servlet extends HttpServlet {    @Override    public void init() throws ServletException {        System.out.println("成功连接到Servlet");    }    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        System.out.println("doGet");        resp.setCharacterEncoding("UTF-8");        resp.getWriter().write("已成功以GET方法连接");        String name = req.getParameter("name");        String psd = req.getParameter("psd");        System.out.println("name="+name);        System.out.println("psd="+psd);    }   @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {       System.out.println("doPost");       resp.setCharacterEncoding("UTF-8");       resp.getWriter().write("已成功以POST方法连接");       String name = req.getParameter("name");       String psd = req.getParameter("psd");       System.out.println("name="+name);       System.out.println("psd="+psd);    }}

运行结果

客户端

这里写图片描述

服务器端

这里写图片描述

原生AJAX

可以参考我的另一篇博客——AJAX
http://blog.csdn.net/iamcgt/article/details/72857872

IntelliJ IDEA部署Servlet

可以参考我的另一篇博客——IntelliJ IDEA部署Servlet
http://blog.csdn.net/iamcgt/article/details/72851756

IntelliJ IDEA配置Tomcat

可以参考我的另一篇博客——IntelliJ IDEA配置Tomcat
http://blog.csdn.net/iamcgt/article/details/72848187

阅读全文

1 0