AJAX原生

Ajax原生发送请求

readyState

为0时,表示创建核心对象,初始化之前
为1时,表示创建核心对象后,初始化时

为2时,表示创建核心对象后,发出请求时
为3时,表示服务器端开始响应浏览器
为4时,表示服务器端响应结束

        window.onload = function () {
          var btn1 = document.getElementById("btn1");
          btn1.onclick = function () {
              // 1.创建用于AJAX方式的一个核心对象

            var xmlHttpRequest = new XMLHttpRequest;
              // alert(xmlHttpRequest);
              // 2.为xmlHttpRequest对象绑定一个固定事件
            /**
             * 事件触发,在一次请求过程中共有5次会被触发
             * 功能是为了接受服务器端传回的数据的。
             */
            xmlHttpRequest.onreadystatechange = function () {
              /**
               * readyState
               *      为0时,表示创建核心对象,初始化之前
               *      为1时,表示创建核心对象后,初始化时
               *      为2时,表示创建核心对象后,发出请求时
               *      为3时,表示服务器端开始响应浏览器
               *      为4时,表示服务器端响应结束
               * @type {number}
               */
              var rState = xmlHttpRequest.readyState;
              if(rState == 4){
                // alert("事件绑定成功-->"+rState);
                //使用核心对象接受服务器传回的唯一数据
                var responseText = xmlHttpRequest.responseText;
                // alert(responseText);
               document.getElementById("d1").innerText = responseText;

              }
            }
              //3.初始化请求  "get"请求方式,"ajaxResponse?name="+name 请求名称携带参数,默认是异步ajax请求
              var name = document.getElementById("name").value;
              xmlHttpRequest.open("get","ajaxResponse?name="+name);
               //4发出请求
              xmlHttpRequest.send();
          }
        }

jQuery发送Ajax请求

$(function () {
    $("#empno").blur(function () {
        //获取请求参数
        var empno = $("#empno").val();
        var ename = $("#ename").val();
        $.ajax({ //在ajax函数中传递一个json数据,json数据中包含所有的参数
            url:"getEmpById", //请求名称
            data:{"empno":empno,"ename":ename},//请求参数
            datatype:"json",//规定从服务器端传回的数据类型,"json","text"
            async:true,//异步请求true,同步请求false,默认异步
            type:"post",//请求方式,post或get,默认是get
            success:function(data){//函数中需要添加一个参数,这个参数可以自动接收服务器传回的数据
                alert(data);
            }
        });
    })
})

$.post() $.get()

post 和 get 使用同理

格式:jQuery.post(url, [data], [callback], [type])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式,xml, html, script, json, text, _default。

$.post("/deleteInfo.do",{"id":id}
       function(data){
    		alert(data);
	  },"json");

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

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

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

"json": 返回 JSON 数据 。

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

"text": 返回纯文本字符串

WRITTEN BY:    Richard

I'm discombobulated !