在JS中使用Ajax

简介:

1. 什么是ajax

    ajax=asynchronous javascript and xml,异步的javascript和xml。为了解决传统的web应用(当用户点击提交之后,浏览器会销毁当前的页面,然后等待服务器返回一个新的页面)“等待-响应-等待”的弊端而创建的一种技术。该技术的实质是:利用浏览器内置一个特殊的对象(XMLHttpRequest,该对象属于BOM模型)异步地(浏览器不会销毁当前页面,用户可以继续做其他的操作)向服务器发送请求,服务器送回部分的数据(XML或者text的形式,非完整的页面),在浏览器端可以使用这些数据部分更新页面。在整个过程当中,浏览器无刷新。

2. 如何获得ajax对象

    ajax对象没有标准化,要获得该对象,需要区分浏览器。

?
1
2
3
4
5
6
7
8
9
10
11
12
//获得XMLHttpRequest对象
function  getXmlHttpRequest(){
     var  xhr= null ;
     if (window.XMLHttpRequest){
        //非IE浏览器
        xhr= new  XMLHttpRequest();
     } else {
        //IE浏览器
        xhr= new  ActiveXObjext( 'Microsoft.XMLHttp' );
     }
     return  xhr;
}

3. ajax的属性

     onreadystatechange:注册监听器(即给ajax对象绑定一个事件处理函数)

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

     responseXML:获得服务器返回的XML

     readyState:ajax在与服务器进行通讯时的状态值,该值一共有5个,分别是0,1,2,3,4。当值为4时,表示ajax对象已经获得了服务器返回的所有的数据,此时,才可以使用responseText,responseXML获得服务器返回的数据。

  0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)。

  1 (初始化) 对象已建立,尚未调用send方法。

  2 (发送数据) send方法已调用。

  3 (数据传送中) 已接收部分数据。

  4 (响应结束)接收了所有的数据。

     status:获得状态码,如404,500,200,302等

4. Ajax编程

4.1. 获得ajax对象

?
1
var  xhr=getXmlHttpRequest();

4.2. 使用ajax对象发送请求

   方式一:get请求    

?
1
2
3
4
5
6
7
//open(请求方式,请求地址,同步还是异步)
//true表示异步,ajax对象发送请求的同时,用户可以对当前页面做其他的操作。false表示同步,ajax对象发送请求的同时,或锁定当前页面,用户只能等待服务器的相应
xhr.open(‘get’,’login. do ?uname=zs’,’ true ’);
//注册一个监听器,触发该事件的时候,由函数fun1来处理
xhr.onreadystatechange=fun1;
//请求参数要添加到请求地址后面
xhr.send( null );

    方式二:post请求

?
1
2
3
4
5
6
7
xhr.open( 'post' , 'check_username.do' , true );
//必须添加一个消息头content-type
xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
xhr.onreadystatechange=fun1;
//要将请求参数放到send方法里面
默认情况下,xhr对象生成的请求数据包没有content-type消息头,需要使用setRequestHeader添加这样一个消息头
xhr.send( 'username=zs' );

4.3. 服务器处理请求,只需要返回部分的数据给客户端

4.4. 在监听器当中,编写相应的处理代码    

?
1
2
3
4
5
6
7
8
9
10
function  fun1(){
    //只有readyState=4,xhr才获得了服务器返回的所有的数据
    if (xhr.readyState==4){
        //获得服务器返回的数据
        var  txt=xhr.responseText;
        var  xml=xhr.responseXML;
        //dom操作,更新页面
        ......
    }
}

5. 编码问题

       a.链接地址当中包含了中文,如何处理?

    如果连接地址包含了中文,浏览器都会对中文按UTF-8进行编码,服务器默认情况下,会使用iso-8859-1进行解码

       解决方式:通知服务器按正确的编码格式进行解码。

           对于tomcat,可以修改/conf/server.xml文件,添加下面的代码:

           URIEncoding=”utf-8”。修改完后,记得重新启动服务器。

       b.链接地址中包含了中文参数值,如何处理?

           例如:<a href=”some.do?name=花花”></a>


目录
相关文章
|
2月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
97 24
|
1月前
|
JavaScript 前端开发 网络协议
|
1月前
|
JavaScript 前端开发 安全
js之AJAX
js之AJAX
23 0
|
3月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
2月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
73 0
|
2月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
35 0
|
3月前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
31 0
|
3月前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
25 0
|
4月前
|
XML 前端开发 JavaScript
【JavaScript技术专栏】JavaScript网络请求与Ajax技术
【4月更文挑战第30天】Ajax是Web开发中实现动态数据更新的关键技术,允许不刷新页面即从服务器获取数据。它结合了HTML/CSS、DOM、XML/JSON和JavaScript。`XMLHttpRequest`是传统的Ajax实现方式,而`fetch` API是现代、简洁的替代选项。Ajax应用实例展示了如何使用fetch在搜索框输入时异步获取并显示结果,提升了用户体验。掌握这些技术对前端开发者至关重要。
41 0
|
4月前
|
JSON 前端开发 JavaScript
JavaScript原生实现AJAX技术详解
【4月更文挑战第22天】本文详细介绍了使用原生JavaScript实现AJAX技术,包括基本原理和步骤。AJAX借助`XMLHttpRequest`对象实现异步通信,允许网页在不刷新情况下与服务器交换数据。文中提供示例展示了如何创建请求、设置回调函数、处理响应数据以及设置请求头和发送不同类型的数据。此外,还讨论了跨域问题及其解决方案,如CORS和JSONP。掌握这些基础知识对前端开发者至关重要,尽管现代框架提供了更高级的抽象。