Ajax请求汇总(一)

刚开始结束Ajax请求的时候,那真的是迷迷糊糊,昏天暗地,通过学习的深入和翻阅各种资料、求助度娘,总结一下Ajax请求,与大家分享一下,希望能给学习Ajax的同学一些帮助,废话不多手,直接开始~~~

一、Ajax请求的原理

1.原理:在Ajax请求中,html页面的中操作将通过Ajax引擎与服务器端进行通讯,然后将返回的结果提交到客户端页面的Ajax引擎,再由Ajax引擎来决定将服务器端返回数据插入到页面的指定位置。从而实现无需刷新页面的http请求。 看图:

2.Ajax请求的优点

 a.当然最大的优点就是,无需刷新就可更新页面
 b.可以把原先服务器端负担的工作的转移客户端,利用客户端的闲置资源进行处理,减轻服务器和带宽的负担,节约空间和成本
 c.Ajax没有平台限制。Ajax把服务器由原先的传送内容转变为传输数据,而数据格式可以为纯文本和XML格式,这两种格式没有平台限制。
 d.可以调用Xml等外部数据,进一步促进页面的显示和数据的分离

3.Ajax使用的技术

 a.XMLHttpRequest对象
 b.XML
 c.JavaScript
 d.Css
 e.DOM

4.Ajax请求时性能的优化

 a.尽量使用局部变量,不要使用全局变量
 b.优化for循环
 c.尽量少使用eval,每次使用eval都会浪费大量时间
 d.将DOM节点附加到文档上
 e.尽量减少使用点“.”号操作符的使用

二、不同方式的Ajax请求

1.原生js的ajax请求

  a.初始化XMLHttpRequest对象

    /* IE6以上的浏览器*/

    var http_request = new ActiveXObject("Msxml2.XMLHTTP") 或者: var http_request = new ActiveXObject("Microsoft.XMLHTTP")

    /* 非IE浏览器(firefox,Opera,Mozilla,Safari)*/
    var http_request = new XMLHttpRequest()

    考虑到浏览器的兼容性,需要创建一个跨浏览器的XMLHttpRequest对象,如下:
        var http_request;
        if (window.XMLHttpRequest) { //兼容非IE浏览器
            http_request = new XMLHttpRequest()
        } else if (window.ActiveXObject) { //兼容IE6以上的浏览器
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP")
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP")
                } catch (e) {}
            }
        }
  b.XMLHttpRequest对象的常用方法

     ----创建新请求的方法
        open()方法用于设置进行异步请求目标的URL,请求方法以及其他参数信息
        open("methods","URL","asyncFlag")
            methods:用于请求的指定类型,一般为POST或者GET
            URL:用于指定的请求地址,可以用绝对地址和相对地址,并且可以传递查询字符串
            asyncFlag:可选参数,用于指定请求方式,异步请求为true,同步请求为false,默认为true

     ----向服务器发送请求的方法
        send()方法用于向服务器发送请求。如果请求声明为异步,该方法立即返回,否则将会等到接收到响应为止
        send(content)
            content:用于指定发送的数据,可以是DOM对象的实例,字符串等,如果没用参数,需要传递设置为null
            举个例子:
                需要向服务器发送一个没有参数的请求,如下:
                http_request.send(null)

     ----设置请求的HTTP头的方法
        setRequestHeader("header","value")
            header:用于指定的HTTP头
            value:用于指定的HTTP头的设置值
            注意:setRequestHeader()方法调用需要在open()方法之后
            例如:
                http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

     ----停止、放弃当前异步请求的方法
        abort()
        例子:停止当前的异步请求http_request.abort()

    c.XMLHttpRequest对象的常用属性

         1.onreadystatechange:用于指定状态改变时所触发的事件处理器属性,在Ajax中,每个状态改变时都会触发
            这个事件处理器,通常会调用一个Javascript函数
            http_request.onreadystatechange = function(){}

         2.readystate:请求状态的属性
            readystate属性的属性值的意义:
                0:未初始化      1:正在加载    2:已加载     3:交互中     4:完成
                在实际应用中,该属性的经常用于判断请求状态,当请求状态为4时,在判断请求是否成功,如果成功,就开始处理返回结果

         3.responseText:获取服务器的字符串响应的属性
            接收响应:var text = http_request.responseText

         4.responseXML:获取服务器的XML响应的属性
            接收响应:var xmldoc = http_request.responseXML

         5.status:返回服务器的HTTP状态码的属性
            格式:http_request.status
            状态码:
                100:继续发送请求       200:请求成功
                202:请求被接受,但尚未成功    400:错误的请求
                404:文件未找到         408:请求超时
                500:内部服务器错误      501:服务器不支持当前请求所需要的某个功能  

            注意:status属性只能在send()方法返回成功时,才能调用
                当请求完成之后:
                    if (http_request.readystate === 4) {
                        if (http_request.status === 200) {
                            alert("请求成功")
                        } else {
                            alert("请求失败")
                        }
                    }

时间: 2024-10-03 23:07:14

Ajax请求汇总(一)的相关文章

jQuery发送Ajax请求以及出现的问题

普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data:{ phoneNo:$(".tel").val() }, success: function(data){ $.toast("发送成功", "text") }, error: function(){ $.toast("发送失败"

Ajax请求传递参数遇到的问题

想写个同类型的,代码未测. 什么是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的功能,即:这么理解吧,WebAPI相当于Web MVC的后台部分. 接下来直接上例子吧,都是我在学习过程中遇到或者发现的一些问题.  一.创建WebAPI项目 (这个环节不是本章重点) 二.传递参数遇到的问题 后台实体类(Person): 1 namespace WebApi.Models 2 { 3 public class Person 4 { 5 6 public int

如何拦截或修改原生ajax请求

jQuery已经实现了各种 ajax 事件,如 beforeSend 等,但原生的 XMLHttpRequest 并没有这种事件.在没有用 jQuery的情况下,如果想修改 ajax 请求,得做一些特殊的处理.以下是我处理的方法: XMLHttpRequest.prototype._open = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method, url, async) {     // 

springMVC 解决ajax请求的406错误

直入主题-- 页面表单异步提交:$.post('<%=request.getContextPath()%>/web/register.html', $(form).serialize(), function(data){...}); java后台springMVC的controller接受请求: @RequestMapping("register") @ResponseBody public Map<String, String> register(HttpSe

JQuery ajax请求一直返回Error(parsererror)

项目中common.js中有一段ajax异常处理方法: $(document).ajaxComplete(function(event,xhr,options) { if (xhr.statusText=="parsererror") { top.location.href="/admin"; } }); 有一个异常页面的ajax请求如下: $.ajax({ type :"post", url :"XXXXXXXXXXXXXXXXXXX

ajax请求不能下载文件(转载)

最近在做文件下载,后台写了个控制层,直接走进去应该就可以下载文件,各种文件图片,excel等 但是起初老是下载失败,并且弹出下面的乱码: 前台请求代码: [html] view plain copy $('#fileexcel').unbind('click').bind('click',function(){ alert("我要下载了"); $.ajax({ type:'post', url:'media', data:null, async:true, success : func

论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解

一.什么是JQuery? JQuery是一种JavaScript框架,是一堆大神搞出来的能够让前端程序猿敲更少代码.实现更多功能的工具(在此,跪谢各位JQuery开发大大们!!!).JQuery的使用给优化HTML文档操作.事件处理.动画设计和Ajax交互提供了巨大的便利.而且,其特有的链式语法也较与JS更为清晰. 二.JQuery入门 想要使用JQuery框架,就必须在html文档中导入JQuery插件,导入方式和日常导入外部JS文件的方式是相同的.但要注意,在同一html文档中插入多个外部J

Shiro Ajax请求没有权限返回JSON,没有登录返回JSON

本文基于Shiro权限注解方式来控制Controller方法是否能够访问. 例如使用到注解: @RequiresPermissions 来控制是否有对应权限才可以访问 @RequiresUser 来控制是否存在用户登录状态才可以访问 想了解Shiro是如何通过注解来控制权限的,可以查看源码 AopAllianceAnnotationsAuthorizingMethodInterceptor ,其构造方法中添加了几个对应的权限注解方法拦截器(这里不做详细阐述). 用户在请求使用这些注解方式控制的方

ajax请求

后端视图函数: def test_ajax(request): import json ret = {"status":True,"error":None,"data":None} #让请求永远返回一个字典形式 try: h = request.POST.get('hostname') i = request.POST.get('ip') p = request.POST.get('port') b = request.POST.get('b_i