Ajax 笔记(十)

简介: Ajax 笔记(十)

1、ajax是什么?

     asynchronous javascript and xml  :异步的 javascript和xml。

    ajax是用来 改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的对象(XMLHttpRequest,一般称之为ajax对象)异步地(当ajax对象向服务器发请求时,浏览器不会销毁当前页面,

               用户仍然可以对当前页面做其它的操作)向服务器发请求。然后, 利用服务器返回的部分数据(服务器并不会返回一个新的完整的页面,只返回少量的数据)更新当前页面。

               整个过程页面无刷新,不打断用户的操作。

2、ajax对象

    (1)获得ajax对象?

         因为ajax对象(即XMLHttpRequest对象)没有标准化,要区分浏览器来获得。

          function getXhr(){
              var xhr = null;
              if(window.XMLHttpRequest){
                   //非ie浏览器
                   xhr = new XMLHttpRequest();
              }else{
                   xhr = new ActiveXObject('Microsoft.XMLHttp');
              }
              return xhr;
         }

    (2)ajax对象的5个属性

         1) onreadystatechange: 绑订事件处理函数, 该函数用来处理ajax对象产生的readystatechange 事件(当ajax对象的readyState属性发生了改变,比如,从0变成了1,就会产生该事件)。

              比如:    

                   var xhr = getXhr();

                   xhr.onreadystatechange = f1;

         2)  responseText: 获得服务器返回的文本。

         3)  responseXML: 获得服务器返回的xml文档。

         4)  status: 获得状态码。

         5)  readyState:  ajax对象的readyState属性有5个值,分别0,1,2,3,4,表示ajax对象与服务器通讯的状态。其中,4表示ajax对象已经获得了服务器返回的所有的数据。

3、编程步骤

    step1,获得ajax对象

         比如:

              var xhr = getXhr();

    step2, 发请求

         方式一:  发送get请求

              xhr.open('get', 'check_username.do?username='+ $F('username'), true);

              xhr.onreadystatechange=f1;

              xhr.send(null);

         注意:

              true: 表示异步,即发送请求时,用户可以对当前页面做其它的操作。

              false:表示同步,即发送请求时,浏览器会锁定当前页面,用户不能做其它的操作。

         方式二: 发送post请求    

    step3, 编写服务器端的处理代码。

         一般来说,服务器只需要返回的少量的数据,不需要返回一个完整的页面。

    step4, 编写事件处理函数

              function f1(){

                   //获得服务器返回的数据

                   //更新当前页面

              }    

4、ajax应用中的编码问题

    (1)发送get请求

         ie浏览器内置的ajax对象,会使用 gbk编码; 而其它浏览器会使用 utf-8编码。

         容器在默认情况下,一般会使用  iso-8859-1去解码,所以,会产生 乱码问题。

         如何解决?

              step1, 让容器使用utf-8去解码。比如,可以修改tomcat的配置文件 conf/server.xml,添加 URIEncoding="utf-8"。

         以上配置的作用是,容器 对所有的get请求中的参数使用utf-8进行解码。

              step2, 对请求地址使用encodeURI函数来

         进行编码。

    (2)发送post请求

         所有浏览器内置的ajax对象都会使用 utf-8编码。而服务器默认情况会使用 iso-8859-1去解码,所以会出现乱码问题。

         解决方式:

              request.setCharacterEncoding("utf-8");

            xhr.open('post','check_username.do',true);

             xhr.setRequestHeader('content-type','application/x-www-url-encoded');

            xhr.onreadystatechange=f1;

            xhr.send('username=' + $F('username'));

       注意:因为按照http协议要求,发送post请求,必须 添加一个content-type消息头。ajax对象默认不会添加这个消息头,所以需要调用 setRequestHeader方法来添加。

           

5、json (javascript object notation)

         json技术借鉴了javascript语言中对象创建的一种语法(javascript object notation),所以命名为  json。          www.json.org

    (1)json是什么?

         是一种轻量级的数据交换标准。

    a,数据交换:

              就是将数据转换成一种标准的、与平台无关的数据格式(比如xml)发送给接受方。

    b, 轻量级:

              json相对于xml而言,所需要的数据更少,并且解析的速度更快。

    (2)语法

         1)表示一个对象

              {属性名称:属性值,属性名称:属性值...}

              注意:

                   a, 属性名称必须使用引号括起来。

                   b,属性值可以是 string,number,boolean,null,object。

                   c,属性值如果是字符串,必须使用 引号括起来。

         2)表示一个对象组成的数组          [{},{},{}...]    

    (3)使用json做数据交换

         (将服务器的java对象或者java对象组成的集合或者数组转换成json字符串发送给浏览器,然后在浏览器端转换成javascript对象)。

         1) java对象 --- > json字符串

              利用json官方提供的api来生成相应的json字符串。

              JSONObject, JSONArray

         2)json字符串 --- > javascript对象        

              可以使用prototype提供的evalJSON函数。

 

  6、ajax编程中的两个问题

            1)缓存问题

                 当 使用ie浏览器时,ajax对象会检查请求地址,如果地址没有变化, 不会向服务器发请求。

                 解决方式:

                      在请求地址后面添加一个随机数

                 比如:

                 xhr.open('get', 'getNumber.do?' + Math.random(),true);         或者,也可以改为post方式发请求。

            2) 同步请求(扩展知识)

                 a,什么是同步请求?

                      当ajax对象再向服务器发请求时,浏览器会锁定当前页面,用户不能对当前页面做其它的操作,必须等待服务器的响应发送回来,浏览器才会向下继续执行。

                 b,如何发送同步请求?

                       xhr.open('get/post','...do',false);

相关文章
|
8月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
7月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
142 2
|
前端开发 数据可视化 JavaScript
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
134 0
|
8月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二
|
8月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一
|
8月前
|
JSON 前端开发 JavaScript
前端知识笔记(三十七)———Django与Ajax
前端知识笔记(三十七)———Django与Ajax
59 0
|
8月前
|
XML JSON 前端开发
Ajax后端极简笔记
Ajax后端极简笔记
77 0
|
8月前
|
JSON 前端开发 JavaScript
前端知识笔记(二)———Django与Ajax
前端知识笔记(二)———Django与Ajax
69 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
84 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
76 0