从零编程:ajax基本知识

ajax 在MVC中示例:

 1  function autoSubmit() {
 2         var postData = $("#AddForm").formSerialize();
 3         var url = "@Url.Action("Registration", "HospitalIntroduct")";
 4         var options = {
 5             type: ‘POST‘,
 6             data: postData,
 7             url: url,
 8             async: false,
 9             success: showResponse
10         };
11
12         if ($("#AddForm").validate().form()) {
13             if (t) {
14                 t = false;
15                 $.ajax(options);
16                 t = true;
17             }
18         }
19     }
二级联动: 1    function zxDwChange() {
 2             var bmid = $("#Dept_id").val();
 3             var Code = @ViewBag.Code
 4           $("#Doctor_ID").empty();
 5             var text = "<option value=‘‘>选择医生</option>";
 6             var url = "@Url.Action("DeptScheduChoose", "HospitalManager")";
 7             $.post(url, { "bmid": bmid, "Code": Code }, function (data) {
 8                 if (data != "") {
 9
10                     for (var i = 0; i < data.length; i++) {
11
12                         text += "<option value=‘" + data[i].ID + "‘>" + data[i].User_Name + "</option>";
13
14                     }
15                 }
16                 $("#Doctor_ID").append(text);
17
18             });
19
20         }

最基本和基础性的有关 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:发送请求的类型。典型的值是 GETPOST,但也可以发送 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,它表示服务器响应已经完成,可以安全地使用响应数据了.

  

时间: 2024-12-29 11:43:32

从零编程:ajax基本知识的相关文章

编程必备基础知识|计算机组成原理篇(06):计算机的字符与编码集

计算机基础方面的知识,对于一些非科班出身的同学来讲,一直是他们心中的痛,而对于科班出身的同学,很多同学在工作之后,也意识到自身所学知识的不足与欠缺,想回头补补基础知识.关于计算机基础的课程很多,内容繁杂,但无论是相关书籍还是大学课程,都有点脱离工作.特别地,计算机基础知识体系庞杂,想要从零学习或者复习都耗时耗力. 有鉴于此,本系列文章将带你更快的补足编程必备基础知识,涵盖计算机领域三大基础知识:计算机组成原理.操作系统.计算机网络,这些都是大学计算机课程里面最重要的内容.文章对这些内容做了提炼和

编程必备基础知识|计算机组成原理篇(07):计算机的总线

计算机基础方面的知识,对于一些非科班出身的同学来讲,一直是他们心中的痛,而对于科班出身的同学,很多同学在工作之后,也意识到自身所学知识的不足与欠缺,想回头补补基础知识.关于计算机基础的课程很多,内容繁杂,但无论是相关书籍还是大学课程,都有点脱离工作.特别地,计算机基础知识体系庞杂,想要从零学习或者复习都耗时耗力. 有鉴于此,本系列文章将带你更快的补足编程必备基础知识,涵盖计算机领域三大基础知识:计算机组成原理.操作系统.计算机网络,这些都是大学计算机课程里面最重要的内容.文章对这些内容做了提炼和

编程必备基础知识|计算机组成原理篇(09):CPU的控制器和运算器

计算机基础方面的知识,对于一些非科班出身的同学来讲,一直是他们心中的痛,而对于科班出身的同学,很多同学在工作之后,也意识到自身所学知识的不足与欠缺,想回头补补基础知识.关于计算机基础的课程很多,内容繁杂,但无论是相关书籍还是大学课程,都有点脱离工作.特别地,计算机基础知识体系庞杂,想要从零学习或者复习都耗时耗力. 有鉴于此,本系列文章将带你更快的补足编程必备基础知识,涵盖计算机领域三大基础知识:计算机组成原理.操作系统.计算机网络,这些都是大学计算机课程里面最重要的内容.文章对这些内容做了提炼和

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

AJAX 基础知识

AJAX 基础知识 一.AJAX综述 1.AJAX的概念 A:异步asynchronousJ:JavaScriptA:andX:XML 异步的JavaScript和XML. 2.AJAX的优点(好处) 1),提高用户体验度  2),JS与服务端的交互  3),页面局部刷新--提高浏览器的效率 2.AJAX的缺点(弊端)    加大服务器的负担 注:新思想,老技术. 二.实现AJAX功能 (一).JS实现AJAX功能 1.获得XMLHttpRequest(浏览器的兼容) (二).JQuery实现A

Ajax基础知识 浅析(含php基础语法知识)

1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo "<div>Hello World!</div>"; ?> (2) $  变量声明  如果只声明不赋值,会报错 <?php $num=123; echo $num; echo "<div>编号为:".$num."&l

JQuery Ajax技术知识

=======================================JQuery Ajax技术知识=========================================== 1.serializeArray()通过序列化表单值来创建对象数组(名称和值). 可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. 语法: $(selector).serializeArray() 返回值: 注意:此方法返回的是 JSON 对象而非 J

Ajax基础知识分享

整理的一点有关ajax的知识,给大家分享下! 说到ajax首先我们先要了解一下关于ajax的原理和XmlHttpRequest对象:Ajax的原理简单来说通过XmlHttpRequest对象来向服务器获得数据,然后用javascript来操作DOM而更新页面,这其中最关键的一步就是从服务器获得请求数据.要清楚这个过程和原理. XMLHttpRequest用于后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网站部分进行更新,当请求被发送到服务器时,每当readyState改变时,

C#复习笔记(5)--C#5:简化的异步编程(异步编程的基础知识)

异步编程的基础知识 C#5推出的async和await关键字使异步编程从表面上来说变得简单了许多,我们只需要了解不多的知识就可以编写出有效的异步代码. 在介绍async和await之前,先介绍一些基础的概念: 并发:同时做很多事情. 这个解释直接表明了并发的作用.终端用户程序利用并发功能,在输入数据库的同时响应用户输入.服务器应用利用并发,在处理第一个请求的同时响应第二个请求.只要你希望程序同时做多件事情,你就需要并发.几乎每个软件程序 都会受益于并发. 多线程:并发的一种形式,它采用多个线程来

对学习Ajax的知识总结

1.对Ajax的初步认识 1.1. Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步 JavaScript 和 XML: 1.2.Ajax 是异步交互,局部刷新: 1.3.Ajax 能减少服务器压力: 1.4.Ajax 能提高用户体验: 2.Ajax交互和传统交互的比较 传统交互:网页整体刷新,服务器压力大,用户体验不好: Ajax 交互:局部刷新,服务器压力小,用户体验好: 3.Ajax核心知识 3.1 XMLHttpRequest对象的创建 所