ajax (原生实现与 jquery实现）

1 原生javascript实现ajax请求参见w3c "值得注意的是写请求路径是：一定不需要加 / “

<script type="text/javascript">

  function fun() {
    var xmlhttp;
    if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
    }else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //get 、post xmlhttp.open("get","ajaxServlet?username='i am parameter'",true); xmlhttp.send(); //获取回转过来的响应 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("p").innerHTML=xmlhttp.responseText; } } }

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

200: "OK"

404: 未找到页面

</script>

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");

        String username = request.getParameter("username");
        System.out.println(username);
        response.getWriter().write("hello im server"); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } }

2 Jquery实现ajax交互

$.ajax( { } )

function fun2() {
    $.ajax({
      url:"ajaxServlet",
      type:"post",
      data:{"username":"jack","age":33},
      success:function(data){
        alert(data);
      }
    });
  }

$.Get("请求路径","请求参数{}","回调函数","返回数据的格式")

$.Post("请求路径","请求参数{}","回调函数","返回数据的格式")

回调函数：

data- 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象

返回数据的格式：可能的类型："xml" "html" "text" "script" "json" "jsonp"

  function fun3() {
    $.get("ajaxServlet",{"username":"rose"},function (data) {
      alert(data)
    },"text");
  }

ajax (原生实现 与 jquery实现）

猜你喜欢

ajax (原生实现与 jquery实现）