AJAX

什么是AJAX？

AJAX的全称（Asynchronous Javascript And XML）异步的JavaScript和XML；
AJAX不是某种编程语言，AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。
这就是Web的运作原理：一次HTTP请求对应一个页面。
如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

同步请求

异步请求

通过AJAX可以用于后台和服务器交换数据，并且数据交换过程中无需重新加载页面，在这种情况下进行交换数据并且可以对网页部分更新

• 运用HTML和CSS来实现页面，表达信息
• 运用AJAX和web服务器进行数据的异步交换
• 运用JavaScript操作DOM，实现动态局部刷新

什么是DOM对象

DOM是文档对象模型(Document Object Model）是基于浏览器编程一套API接口，通过它，我们可以访问HTML文档对象属性、方法、事件，还可以对其进行操作。
在HTML中所有的事物都有节点，DOM将HTML文档视作节点树，通过DOM，节点树中的是所有节点都可以通过JavaScript进行访问，所有的HTML元素都可以被修改、创建、删除。

Ajax-HTTP请求

http是计算机通过网络进行通信的规则

用jQuery实现Ajax

ajax常用参数列表

type：请求方式（post或get）默认为get；
url：发送请求的地址（默认为当前页地址）；
data：Object或String类型的参数，连同请求发送到服务器的数据；
dataType：预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息来智能判断；
常用数据类型：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
beforeSend：用于在向服务器发送请求前执行一些动作。防止重复数据，在实际项目开发中，提交表单时常常由于网络或者其原因，用户点击提交按钮误认为自己没有操作成功，进而会重复提交按钮操作次数，如果页面前端代码没有做一些相应的处理，通常会导致多条同样的数据插入数据库，导致脏数据的增加。要避免这种现象，在$.ajax请求中的beforeSend方法中把提交按钮禁用掉，等到Ajax请求执行完毕，在恢复按钮的可用状态。或者使用jQuery中的消息提示插件jquery.toast.js；

//在页面中引入jquery.toast.css文件，jquery和jquery.toast.js文件。
//简单的文本消息提示框
$.toast({
  text : "错误提示信息",
  position : 'top-center'
});
//自定义消息提示框
$.toast({ 
  text : "......", 
  showHideTransition : 'slide',
  bgColor : 'blue',
  textColor : '#eee',
  allowToastClose : false,
  hideAfter : 5000,
  stack : 5,
  textAlign : 'left',
  position : 'bottom-left'
}) 

text：消息提示框的内容。
showHideTransition：消息提示框的动画效果。可取值：plain，fade，slide。
bgColor：背景颜色。
textColor：文字颜色。
allowToastClose：是否显示关闭按钮。
hideAfter：设置为false则消息提示框不自动关闭。设置为一个数值则在指定的毫秒之后自动关闭消息提示框。
stack：消息栈。
textAlign：文本对齐：left, right, center。
position：消息提示框的位置：bottom-left 、 bottom-right 、 bottom-center 、 top-left 、 top-right 、 top-center 、 mid-center。

success：是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串；
error：是一个方法，请求失败时调用的函数；

案例代码：

        $.ajax({
            type: 'POST',
            url: 'service.php',
            dataType: 'html',
            data: {
                name: $('#name').val(),
                number: $('#number').val(),
                sex: $('#sex').val(),
                job: $('#job').val()
            },
            beforeSend: function() {
            $("#submit").attr({ disabled: "disabled" });
            }
            success: function(data) {
                $('#createResult').html(data);
            },
            error: function(data) {1
                alert('操作失败');
            }
        })

Ajax跨域

$.ajax({
            url: "http://127.0.0.1:33654/up.ojbk?mode=now&table="+rs+"&callback=funName",//接口返回格式：funName({"status":true,"msg":"提交成功"});
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'funName',
            success: function(e) {

                if (e.status) {
                    $.ajax({
                        url: 'http://127.0.0.1:33654/up.ojbk?mode=check&callback=funName',
                        dataType: 'jsonp',
                        jsonp: 'callback',
                        jsonpCallback: 'funName',
                        success: function (d) {
                            alert(d.msg);
                        }
                    });
                }
            }
        });

跨域接口请求返回值：funName({'code':true,'msg':'返回请求结果'})；jsonpCallback一定要与接口返回函数包名称相同；

Javascript出于安全方面的考虑，不允许跨域调用其它页面的对象。什么是跨域呢？简单的理解就是因为javascript同源策略的限制，a.com域名下的js无法操作b.com或是c.com域名下的对象；