AJAX随笔1

[1] AJAX简介
    > 全称: Asynchronous JavaScript And XML
    > 异步的JavaScript和XML
    > AJAX就是通过JavaScript向服务器发送请求,并接收响应,然后我们在通过DOM来修改页面。
    > XML指的是服务器响应的数据的格式。
    > 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。
  
 [2] 同步和异步
    >  同步:
       当我们通过浏览器向服务器发送一个请求时,浏览器会刷新整个页面。
    > 异步:
       当我们向服务器发送请求时,不是刷新整个网页,而是只刷新网页的一部分。
 
 [3] XMLHttpRequest对象
    > 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
    > 在XMLHttpRequest对象中封装发送给服务器请求报文,同时在服务器发回响应时,响应信息也会在对象中封装。
    > 如何获取XMLHttpRequest对象
        - var xhr = new XMLHttpRequest();
 
 [4] 使用步骤
    1.创建XMLHttpRequest对象
       大部分比较新的浏览器都支持的方式(IE7以上)
          var xhr = new XMLHttpRequest();
       IE6以下的
          var xhr = new ActiveXObject("Msxml2.XMLHTTP");
       IE5.5以下的
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    
       通用的获取XMLHttpRequest对象的方法:

   //写一个获取XHR的方法
   function getXMLHttpRequest(){
    try{
     //大部分浏览器都支持的方式
     return new XMLHttpRequest();
    }catch(e){
     try{
      //IE6以下浏览器支持的方式
      return new ActiveXObject("Msxml2.XMLHTTP");
     }catch(e){
      try{
       //IE5以下的浏览器
       return new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){
       alert("你的浏览器不支持AJAX!");
      }
     }
    }
   }

  2.设置请求信息(请求地址,请求方式,请求参数)
       xhr.open(请求方式,请求地址);
       在发送post请求时,还需要设置一个请求头,如下:
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  
    3.发送请求
       xhr.send(请求体);
       get请求没有请求体,所以send中可以传null或什么都不传。
       post请求需要通过send来设置请求参数。
   
  
      4.接收响应信息

  //xhr绑定一个onreadystatechange响应函数,这个函数会在readyState属性发生改变时调用
   xhr.onreadystatechange = function(){
    //判断当前readyState是否为4 , 且响应状态码为200
    if(xhr.readyState==4 && xhr.status==200){
     //读取响应信息,做相关操作。

     //如果信息为纯文本
     xhr.responseText

     //如果信息为XML
     xhr.responseXML
    }
   };

[5] 响应数据的格式
    - 响应一个XML
    - 当我们想通过servlet给ajax返回一个比较大量的信息,返回一个对象。
    - 返回 User :username:sunwukong  age:18 gender:男
       username:sunwukgon,age:18,gender:男
    - 我们可以通过一个XML格式来返回一个大量的信息
        <user>
        <name></name>
        <age></age>
        <gender></gender>
        </user>
   
    - 响应一个JSON对象
   
2.JSON
   [1] JSON简介
      > JSON全称 JavaScript Object Notation
      > 类似于JS中对象的创建的方法
      > JSON和XML一样,都是一种表示数据的格式
      > 但是JSON比XML的存储和解析性能要高的多,JSON要比XML高个30%左右。
          <user>
          <name>sunwukong</name>
          <age>18</age>
          <gender>男</gender>
          </user>
   
         {"name":"孙悟空","age":8,"gender":男}
  
   [2] JSON的格式
      > JSON字符串不方便阅读,但是传输性能好
      > XML方便阅读,但是传输性能差
      > JSON的格式和JS对象类型,但是要求属性名必须使用双引号。不能使用单引号,也不能不写引号!
  
  
      > JSON对象中实际就是一组一组的键值对的结构,
         键和值使用:连接,多个键值对之间使用,分开,注意如果是最后一组键值对,则千万不要在加,.
      > {
         "属性名1":属性值1,
         "属性名2":属性值2,
         "属性名3":属性值3,
         "属性名4":属性值4
        }
  
      > JSON运行属性值的类型:
         1.字符串  2.数字  3.布尔   4.对象  5.数组  6.null
   
      > 数组:
         [属性1,属性2,属性3,属性4]
 
   [3] JS中使用JSON 
      JSON对象 --> JSON字符串
       JSON.stringify(对象)
      JSON字符串 --> JSON对象
       JSON.parse(JSON字符串)
 
   [4] Java中使用JSON
      > 目前Java中用的比较多的JSON解析工具:
         json-lib -->  使用麻烦,解析性能最差
         Jackson --> 使用较麻烦,解析性能最好
         Gson --> 使用简单,解析性能中能
            - Gson是谷歌出的一款JSON解析工具,使用简单,且性能较好。
               Java对象 --> JSON字符串
               JSON字符串 --> Java对象
  
3.通过jQuery实现AJAX
   > 使用get和getJSON都会有缓存问题,并且使用get方法不能传送较多的数据。
   > post方法不会有缓存的问题,所以我们开发时使用post方法较多。
   [1] post()方法 
      $.post(url, [data], [callback], [type])
      参数:
         url:发送AJAX的请求地址,字符串。
         data:发送给服务器的请求参数,JSON格式。
         callback:当前需要获取服务器发送的响应时,我们可以通过该回调函数。
              jQuery会将响应信息以回调函数的参数的形式返回
         type:响应信息的类型,字符串。一般两个常用值text、json
 
   [2] get()方法
      - get方法和post方法使用方式基本一致。
 
   [3] getJSON()方法
       getJSON(url, [data], [callback])
       getJSON方法和get方法类似,只不过该方法默认的响应类型为JSON,不需要再手动指定。

时间: 2024-10-17 16:36:15

AJAX随笔1的相关文章

Ajax 随笔

1.缓存机制 'abc.txt?t=' +  new Date().getTime() 2.eval() 计算字符串里的值 获取到的数据是 字符串 var  str = '20-5';   alert (eval(str))  ==========> 15 var  str = '[1,2,3]';   var arr =eval(str);   alert (arr[0])   ==========> 1 var str = 'function show(){alert('ss')}';  

Ajax随笔

1. //定义一个多维数组,包含员工的信息,每条员工信息为一个数组//它可以包含这样一个键值的方式.因为这只是一个简单的例子,所以我就把员工的信息都定义在多维数组中,不再存储数据库. 1 $staff = array 2 ( 3 array("name" => "洪七", "number" => "101", "sex" => "男", "job"

ajax 随笔 - 1 文章 - 141 评论 - 143 JavaScript 的简单学习2

https://www.cnblogs.com/yuanchenqi/articles/5997456.html AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javascript对象: 请大家记住一句话:json字符串就是js对象的一种表现形式(字符串的形式) 既然我们已经学过python的json模块,我们就用它来测试下json字符串和json对象到

php随笔2-php+ajax 实现输入读取数据库显示匹配信息

dropbox_index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

AJAX学习随笔

AJAX名为“啊,贾克斯”,听着挺怪的哈. 主要的技术就是XMLHttpRequest对象和Javascript 度娘的解答: AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个

2016.6.23 随笔———— AJAX

1.什么是AJAX: AJAX 即Asynchronous JavaScript And XML(异步 JavaScript和XML), 创建快速动态网页技术 通过后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页页面. 2. AJAX核心: 一种独立于WEB服务器软件的浏览器技术. 即是在浏览器(客户端)中,存在一个AJAX引擎对AJAX块的程序进行异

AJAX调用案例随笔(个人观看使用)

<script type="text/javascript"> /*var contextpath = "http://192.168.0.103:8080/sjfxms2";*/ var contextpath = "http://192.168.3.5:8080/sjfxms2"; mui.init(); document.getElementById("knowf").addEventListener('ta

【2018-07-05】关于ajax的随笔

html1 <script> $(document).ready(function () { $("#login").click(function () { var n = $("#name").val(); var p = $("#pwd").val(); $.post("/WebForm1.aspx" , { "name": n, "pwd": p }, dataCall

随笔:ajax传递数组,layui父子页面传值,下来菜单赋值,父页面数据获取,表格数据替换为字符串

一.Ajax向后台传递数组问题:(声明前台我使用的layui框架)例:我们要多前台一个数据表格进行批量删除操作,我们通过复选框选中数据id,将id存入一个数组中,然后利用ajax传递给后台,完成批量删除,再过程中我们需要加上traditional : true代码如下: function batchDel() { var datas; var ids = new Array();// 声明数组 layui.use('table', function() { var table = layui.t