jq of ajax learning

ajax - separating the front and back development API (Application Program Interface Data Set ---)
the partial refresh technique
asynchronous request (and subsequent code simultaneously) synchronization request (request waits for a subsequent execution completes execution code)
to access background data specialize
ajax js objects first learn the native of XMLhttprequest objects background data access objects
native js written specifically when access background data
1. instantiate the object
2.open connect to a remote server parameters: method requested method get post url: server path requested
async the current request is synchronous or asynchronous true asynchronous false synchronization user name password user password

send () sends a request
4. response event the onreadystatechange
5. The rendering interface

var http = new XMLHttpRequest();
 //2.建立服务器连接
 http.open("get", "./data/student.txt");
 //3.发送请求
 http.send();
 //4.服务器响应
 http.onreadystatechange = function () {
 //5.界面的渲染
 //判断   获取最终读取完成状态
 if (http.readyState == 4) {
 //返回的数据都是string
 //console.log(typeof http.responseText);
 console.log(http.response);
 //字符串类型的json数据转化为对象型json  JSON.parse()
 var data = JSON.parse(http.response);
 console.log(data);
 //对象json转化为string json  JSON.stringify
 //var strdata=JSON.stringify(data);
 //console.log(strdata);
 }

 }

//原生ajax的封装
function method(meth, url, data, async, callback) {
    //对象的创建
    var http = new XMLHttpRequest();
    //判断
    if (meth == "get") {
        //get 传递的数据在路径的后边  www.baidu.com?name=1&s=2
        if (data) {
            url += "?";
            url += data;
        }
        http.open(meth, url, async);
        http.send();
    }
    else {
        http.open(meth, url, async);
        //判断是否有数据
        if (data) {
            http.send(data);
        }
        else {
            http.send();
        }
    }
    //响应
    http.onreadystatechange = function () {
        //状态的判断
        //状态码  200 success  500  服务器报错 404  服务器端页面丢失
        if (http.readyState == 4 && http.status == 200) {
            //将请求的数据返回
            callback(http.response);
        }

    }
}

//域名解析就是localhost   没有写端口号默认80端口
//协议不一致会产生跨域
//端口不一致也会导致跨域
//域名不一致也会产生跨域
/*
 * http://www.maodou.com/mao/list.html
 * https://www.maodou.com/mao/list.html
 * http://www.maodou.com:8080/mao/list.html
 * http://www.dou.com/mao/list.html
 * */

// how to solve cross-domain
can directly access shared resources after // cros be configured in back-end configuration
// write a word such as php header ( "Access-Control-Allow -Origin: In the back-end file inside "); representatives All
// jsonp src cross-domain called cross-domain path directly in the native js inside
// src can be connected to a remote path
// script src attribute directly connected directly api background remote access
// path in the back with a callback function on well, the background process back to a callback function
// the following cross-domain issue demonstrates jsonp

// jsonp src principle is to use cross-domain in front-end cross-domain (must have a background process in response to such a reception callback function) for incoming interface a callback function to execute
2.jquery inside ajax request

$.ajax({
     method:"get",//请求的方式  type
     url:"", //路径
     data:{},//传递的参数
     dataType:"",//数据类型
     jsonpCallback:"",//jsonp  跨域的
     success:function (res){
     //成功
     },
     error:function (){
     //请求失败
     },
     async:true//设置同步异步的
     });

Guess you like