从零编程：ajax基本知识

ajax 在MVC中示例：

 1  function autoSubmit() {
        var postData = $("#AddForm").formSerialize();
        var url = "@Url.Action("Registration", "HospitalIntroduct")";
        var options = {
            type: 'POST',
            data: postData,
            url: url,
            async: false,
            success: showResponse
        };

        if ($("#AddForm").validate().form()) {
            if (t) {
                t = false;
                $.ajax(options);
                t = true;
            }
        }
    }

 

二级联动：
 1    function zxDwChange() {
            var bmid = $("#Dept_id").val();
            var Code = @ViewBag.Code
          $("#Doctor_ID").empty();
            var text = "<option value=''>选择医生</option>";
            var url = "@Url.Action("DeptScheduChoose", "HospitalManager")";
            $.post(url, { "bmid": bmid, "Code": Code }, function (data) {
                if (data != "") {

                    for (var i = 0; i < data.length; i++) {

                        text += "<option value='" + data[i].ID + "'>" + data[i].User_Name + "</option>";

                    }
                }
                $("#Doctor_ID").append(text);

            });

        }

 

最基本和基础性的有关 Ajax 的全部对象和编程方法：

1.XMLHttpRequest 对象

     这个对象是学习ajax前必须先熟悉的一个 JavaScript 对象：

open()：建立到服务器的新请求；

send()：向服务器发送请求

abort()：退出当前请求；

readyState：提供当前 HTML 的就绪状态

responseText：服务器返回的请求响应文本；

 

XMLHttpRequest 的所有方法和属性，它们都 与非常简单的请求/响应模型有关。

要用XMlHttpRequest对象必须先new一个对象实例：

var request = new XMLHttpRequest();//记住，JavaScript是弱类型所以 不要求指定变量类型，

因为JS没有报错机制：所以我们要用try{}catch{}来建立报错机制，假如代码运行错误，浏览器可以弹出错误提示。

try { request = new XMLHttpRequest();}

catch{alert("error!")}

接下来将ajax:

Ajax 采用一种沙箱安全模型,因此Ajax 代码（具体来说就是 XMLHttpRequest 对象）只能对所在的同一个域发送请求。

1.建立url：  var url = "base/lookupCustomer.php?phone=" + escape(phone)&“id=“+id;

   可以根据需要添加任意多个参数。比如，如果需要增加另一个参数，只需要将其附加到 URL 中并用 “与”（&）字符分开 [第一个参数用问号（?）和脚本名分开]。

    escape() 方法，它用于转义不能用明文正确发送的任何字符。比如，电话号码中的空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。

2.建立请求：XMLHttpRequest.open()

在open（）中有五个参数，常用的是前三个：

1.request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求

2.url：要连接的 URL

3.asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true

4.username：如果需要身份验证，则可以在此指定用户名。可选，没有默认值。

5.password：如果需要身份验证，则可以在此指定口令。可选，没有默认值。

示例：

function getCustomerInfo() {      var phone = document.getElementById("phone").value;      var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);      request.open("GET", url, true);    }

3.发送请求：request.send();只有一个参数，就是要发送的内容,但是URL本身便可以传输数据，

用 open() 配置好之后，就可以发送请求send()，不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可

4.回调传回的数据：

ajax的生命周期：

1.请求没有发出（在调用 open() 之前）。

2.请求已经建立但还没有发出（调用 send() 之前）。

3.请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。

4.请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。

5.响应已完成，可以访问服务器响应并使用它。

对于 Ajax 编程，需要直接处理的惟一状态就是就绪状态 4，它表示服务器响应已经完成，可以安全地使用响应数据了.