菜单

Ajax用法

duckflew
发布于 2021-03-14 / 734 阅读
0
0

Ajax用法

Ajax

Asynchronous JavaScript + XML(异步JavaScript和XML), 其本身不是一种新技术,而是一个在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTMLXHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作.

尽管X在Ajax中代表XML, 但由于JSON的许多优势,比如更加轻量以及作为Javascript的一部分,目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息

1.原生的js方式

function fun()
      {
          //1.创建核心对象
          var xhttp;
          if (window.XMLHttpRequest)
          {
            //如果是高版本浏览器
            xhttp = new XMLHttpRequest();
          }
          else
          {
            // code for IE6, IE5
            //低版本浏览器
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
  //2.建立链接
          xhttp.open("GET", "ajax?username=tom", true);
          /**
           参数1 请求方式
           如果是post请求 则在send方法里面附带参数
           否贼的话在 open的url后面附带参数
           *请求的url
           */
  //3.发送请求
          xhttp.send();
  //4.接受服务器的响应结果
            xhttp.onreadystatechange=function()
            {
              //判断readystate的就绪状态是否是4 判断status的响应状态妈是否为200
              if (xhttp.readyState==4 && xhttp.status==200)
              {
                 var responseText=xhttp.responseText;
                 alert(responseText);
              }
            }
      }
<input type="button" value="发送异步请求" onclick=fun()>

这里我改成POST请求 发送ajax请求 服务端没有收到数据 不知道为什么

服务端代码

@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String username=req.getParameter("username");
        System.out.println("username="+username);
        resp.getWriter().write("hello,"+username);
    }

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        this.doPost(req, resp);
    }
    
}

访问的结果如下

image-20200917194729221

页面弹窗

image-20200917200512084

2.Jquery的实现方式

当然首先要导入Jquery了

  • $.ajax()

    • 语法:.$.ajax({键值对});

      实例:

      function jqueryAjax() {
              $.ajax({
                //type默认是get
                url: "ajax",
                type: "POST",
                data: {"username":"jack","age":23},
                success : function(data)
                {
                  //响应成功自动执行function
                  alert(data);
                },
                error: function () {
                  alert("ajax请求出错了!")
                },
                //设置接收到的响应的数据的格式 如果不指定 会自动根据http头来设置
                dataType : "text"
              })
            }
      
    • 运行效果

      image-20200917202405024

  • $.get() :发送get请求

    • 语法 $.get(url,[data],[callback],[type])

      实例

       function fun() {
              $.get("ajax",{username:"rose"},function (data) {
                    alert(data);
              },"text");
            }
      
    • 运行效果

      image-20200917203549977

  • $.post() :与上面的get一样

    • 语法 $.post(url,[data],[callback],[type])

      实例

       function fun() {
              $.post("ajax",{username:"post"},function (data) {
                    alert(data);
              },"text");
            }
      
    • 运行效果

3.其中 几个参数的解释如下

  • Content-Type: 表示期望从后端接受到的数据的格式

    • application/json表示发送到后端的是序列化之后的json字符串 应该用@requestBody来接受

    • application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式(当然也有方案这点可以参考 ) ,你传进去可以发送请求,但是服务端收到数据为空, 因为 ajax 没有办法知道怎样处理这个数据。

    • application/x-www-form-urlencoded:
      是常用的POST 提交数据的方式,普通的表单提交,或者js发包,如果不设置 content-type 属性,默认都是通过这种方式

    • application/json:
      现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。application/json用来告诉服务端消息主体是序列化后的 JSON 字符串,JSON 格式支持比键值对复杂得多的结构化数据。

    • multipart/form-data
      使用表单上传文件时,必须让 form 的 enctyped 等于multipart/form-data

  • Data-Type表示从后台接受到的数据类型

    预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script
    则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值如下:

    • ”xml”: 返回 XML 文档,可用 jQuery 处理。

    • ”html”: 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。

    • ”script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)

    • ”json”: 返回 JSON 数据 。

      如果指定为json类型,则会把获取到的数据作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回。为了实现这个目的,他首先尝试使用JSON.parse()。如果浏览器不支持,则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。

    • ”jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

    • ”text”: 返回纯文本字符串


评论