ajax的两种写法总结以及ajax中jsonp跨域

最新推荐文章于 2023-03-01 18:47:20 发布

狂风之力

最新推荐文章于 2023-03-01 18:47:20 发布

阅读量518

点赞数

文章标签： ajax json

本文链接：https://blog.csdn.net/x_christ1/article/details/84062457

版权

ajax不是一种新的编程语言，而是使用JavaScript向服务器提出请求并处理而不阻塞用户，核心对象时XMLHTTPRequest,可以在不刷新页面的前提下进行局部刷新（使用异步数据刷新），使用户的体验更好，服务器的压力更小。

一.原生的ajax

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
      <head>
            <title></title>
            <script type="text/javascript">
             function myajax(){
              //第一步，创建XHR对象，根据浏览器的版本来创建不同的对象
              var XHR=null;
              if(window.XMLHTTPRequest){  
               XHR=new XMLHTTPRequest();
              }else{
               XHR=new ActiveXObject("Microsoft.XMLHTTP"); //IE5,IE6版本的对象
              }
               //第二步，发送异步请求
               if(XHR!=null){
               var name=document.getElementById("name").val();
               XHR.open("GET","t10OP.jsp?name"+name,true); //三个参数分别是提交方式， 
                                                             url,true为异步
               XHR.onreadystatechange=myfun;  //状态改变时执行回调函数
               XHR.send(null);
               }
               //第三步，定义回调函数
               function myfun(){
               if(XHR.readyState==4&&XHR.status==200){
                var s=XHR.responseText;
                document.getElementById("info").innerHTML=s;
                    }
           }
}
</script>
      </head>
      <body>
      姓名：<input type="text" id="name"/><p/>
      <button onclick="myajax();">异步请求</button><p/>
      <div id="info"></div>
      </body>
</html>

模拟服务器的代码：

t10OP.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String name=request.getParameter("name");
out.println("hello,"+name);
%>

原生ajax的创建以及使用步骤：

1.先创建XMLHTTPRequest的对象

2.使用open方法，设置请求参数（请求的方式，请求页面的相对路径，是否异步）

3.选择回调函数，一个处理服务器响应的函数，使用onreadystatechange

4.获取异步对象readyState,“4”表示成功；服务器响应的状态status，200表示成功

5.读取响应的数据，可以通过XHR对象的responseText属性来读取服务器返回的数据

当用ajax传递中文时，需要对传递参数进行处理。

用到了encodeURI函数，主要是URI来进行转码的，它默认采用的是UTF-8的编码。

name=encodeURI(encodeURI(name)); //需要调用两次的encodeURI来解决乱码问题；

在服务器端就要相应的加上解码代码：

name=URLDeceder.decode(name,"UTF-8"); //解码代码

而且在解码端还需要引进相应（解码）的库文件

用post传递中文时，需要设置Header

XHR.setRequestHeader("Content-type","application/x-www-form-urlencoder"); //此代码一般加在open()之后，send()之前

post与get的区别

1.get请求会将参数跟在URL后进行传递，post则是将参数作为HTTP消息的实体内容发送给WEB服务器。

2.get最多只能一次提交1024字节的内容，而post则没有此限制。

3.get请求数据会被浏览器缓存起来，有可能造成严重的安全问题。

4.在服务器端的区别：get请求，使用Request.QueryString来获取参数，而post请求，则是使用Request.Form来处理。

二.jquery中的$.ajax()

$(function() {
    $('#send').click(function () {
    $.ajax({
           type: "GET",     //ajax的请求方式
           url: "test.json",   //规定发送的url地址
           async:true,     //默认为true，所有请求为异步请求
           data: {         //规定要发送到服务器的数据，只要是Object,String类型的都可以
                 "username": $("#username").val(),   //也可以是{username:"用户名"}, 
                                                              {'username':"用户名"}
                 "content": $("#content").val()
             },
          dataType: "json",    //预期服务器的返回数据，是服务器回馈的数据格式
          success: function (data) {   //请求成功后的回调函数
          $('#resText').empty();
                 var html = '';
                 $.each(data, function (commentIdndex, comment) {
                 html += '<div class="comment"><h6>' + comment['username']
                 + ':</h6><p class="para"' + comment['content'] + '</p></div>';
                 });
      $('#resText').html(html);
}
     });
   });
});

其他参数：1.cache:默认是true 从浏览器缓存中加载请求信息

2.contentType:当发送信息到服务器时，内容的编码格式,默认值为"application/x-www-form-urlencoded"。

可以改为 contentType:"application/json".

get与post传参：get可以直接将参数加在url后面，也可以放在send()方法中，此时都是将参数通过url传输，而在post中，数据只能放在send()方法中。其中post方法中data需要用JSON.stringify()来格式化一下，使其变为json字符串，而在get方法中则不需要用JSON.stringify()来格式化。

json对象，js对象，json字符串的关系：

json对象{"id"：1，"name":"long"} js对象{id：1，name:"long"}

json对象的键必须用“”（双引号）括起来，js对象的键不用括起来，而且值可以为函数，而前者不行。

json对象加上’‘（单引号）就成为json字符串。

json字符串--->json对象：Json.parse();

json对象-->json字符串:Json.stringify().

JSONP跨域

JSON是一种基于文本的数据交互方式（不支持跨域），而JSONP是一种非官方的跨域数据交互协议。

使用JSON格式传递数据的客户端代码：

$(function () {
    var user = {
        "username": "HelloWorld"
    };

    $.ajax({
        url: "http://localhost:8080/Changyou/UserInfo",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",  //json不支持跨域请求,只能使用jsonp
        data: {
            user: JSON.stringify(user)
        },
        success: function (data) {
            $("#user_name")[0].innerHTML = data.user_name;
            $("#user_teleNum")[0].innerHTML = data.user_teleNum;
            $("#user_ID")[0].innerHTML = data.user_ID;
        },
        error: function () {
            alert("请求超时错误!");
        }
    })
});

原理：js文件的调动是不受跨域影响的调动的，可以在远程服务器上将JSON数据封进js格式的文件中，供客户端调用和进一步处理。

该协议需要用户传递一个callback参数给服务器，服务器返回数据时会将callback参数作为函数名来包裹住JSON数据。

其实简单的说：json不支持跨域，但js可以跨域，因此在服务器端用客户端提供的js函数名将son数据封装起来，再将函数提供给客户端调用，从而获得json数据。

JSONP的代码如下：

$(function () {
    var user = {
        "username": "HelloWorld"
    };

    $.ajax({
        url: "http://localhost:8080/Changyou/UserInfo",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",  //json不支持跨域请求,只能使用jsonp
        data: {
            user: JSON.stringify(user)
        },
        jsonp:"callback",   //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名,默认为callback
        jsonpCallback:"userHander",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
        success: function (data) {
            $("#user_name")[0].innerHTML = data.user_name;
            $("#user_teleNum")[0].innerHTML = data.user_teleNum;
            $("#user_ID")[0].innerHTML = data.user_ID;
        },
        error: function () {
            alert("请求超时错误!");
        }
    })
});

服务器端代码如下：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json; charset=utf-8");
    String username = new String(request.getParameter("user").getBytes("ISO-8859-1"),"utf-8");
    String callback = new String(request.getParameter("callback").getBytes("ISO-8859-1"),"utf-8");
    System.out.println("接收到的数据：" + username);
    System.out.println("callback的值：" + callback);
    JSONObject user = JSONObject.fromObject(username);
    System.out.println("接收到的用户名：" + user.get("username"));
    JSONObject userinfo = new JSONObject();
    userinfo.put("user_name", "张鸣晓");
    userinfo.put("user_teleNum", "18810011111");
    userinfo.put("user_ID", "123456789098765432");
    PrintWriter out = response.getWriter();
    String backInfo = callback + "(" + userinfo.toString() + ")"; //将json数据封装在callback函数中提供给客户端
    out.print(backInfo);
    out.close();
}

尽管客户端没有实现userHandler函数，但也能成功运行，原因就是jquery在处理jsonp类型的ajax时，自动帮你生成回调函数并把数据取出来供success属性方法来调用。

狂风之力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的两种写法总结以及ajax中jsonp跨域

ajax不是一种新的编程语言，而是使用JavaScript向服务器提出请求并处理而不阻塞用户，核心对象时XMLHTTPRequest,可以在不刷新页面的前提下进行局部刷新（使用异步数据刷新），使用户的体验更好，服务器的压力更小。一.原生的ajax&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-...
复制链接

扫一扫