---恢复内容开始---

1、jq中ajax封装

简单的$.ajax方法使用示例:请关注 传参类型及数据

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-3.3.1.min.js"></script>
<script>
window.onload=()=>{ $('#btn')[0].onclick=function(){
var code=$('#code')[0].value
// console.log('cc')
$.ajax({
type:'post',
// url:'../ajax/backend.php?code='+code,
url:'../ajax/backend.php',//根据data自动拼接
data:{code:code},
dataType:'json',//xml/text/html/script/jsonp
success:function(data){
var info=$('#info')[0]
if(data.flag==0){
info.innerHTML='没有这本书'
}
else{
var tag='<ul><li>价格:'+data.price+'</li><li>作者:'+data.author+'</li></ul>'
info.innerHTML=tag
}
}
})
}
}
</script>
<style>
#container {
width: 360px;
min-height: 100px;
background-color: beige;
position: absolute;
left: 50%;
top: 10px;
margin-left: -180px;
}
</style>
</head> <body>
<div id="container">
<div>
图书编码:<input type="text" name="code" id="code">
<input type="button" value="query" id="btn">
</div>
<div id="info"></div> </div>
</body> </html>

2、ajax API

$.ajax中也可以传错误的回调:

error:function(data){
return console.dir(data)
}

3、$.ajax自行封装

function ajax(obj) {
//默认参数
var defaults = {
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
console.log(data)
}
}
//处理形参,进行覆盖
for (let key in obj) {
defaults[key] = obj[key]
}
//创建对象
var xhr = null
//兼容处理
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//把对象形式对的参数转换为字符串形式的参数
var param = ''
for (let attr in obj.data) {
param += attr + '=' + obj.data[attr] + '&'
}
if (param) {
param = param.substring(0, param.length - 1)
}
//处理get请求参数及中文乱码问题
if (defaults.type === 'get') {
defaults.url += '?' + encodeURI(param)
}
//准备发送,设置发送的参数
xhr.open(defaults.type, defaults.url, defaults.async)
//处理post请求并设置请求头
var data=null
if(defaults.type==='post'){
data=param
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded")
}
xhr.send(data)
//处理同步情求,不执行回调函数
if(defaults.async){
return xhr.responseText//不用传回调函数
}
//设置回调函数
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText
if(defaults.dataType=='json'){
data=JSON.parse(data)
}
obj.success(data)
// console.log('ok')
}
}
}
}

4、ajax跨域

1)

跨域是非常常见的

2)一般解决方案:jsonp

开发接口简单,不存在兼容性问题

其他方案有:

3)跨域报错

拦截跨源请求:同源策略禁止读取位于 http://over.com/data.php 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')

Failed to load http://over.com/data.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

---恢复内容结束---

1、jq中ajax封装

简单的$.ajax方法使用示例:请关注 传参类型及数据

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-3.3.1.min.js"></script>
<script>
window.onload=()=>{ $('#btn')[0].onclick=function(){
var code=$('#code')[0].value
// console.log('cc')
$.ajax({
type:'post',
// url:'../ajax/backend.php?code='+code,
url:'../ajax/backend.php',//根据data自动拼接
data:{code:code},
dataType:'json',//xml/text/html/script/jsonp
success:function(data){
var info=$('#info')[0]
if(data.flag==0){
info.innerHTML='没有这本书'
}
else{
var tag='<ul><li>价格:'+data.price+'</li><li>作者:'+data.author+'</li></ul>'
info.innerHTML=tag
}
}
})
}
}
</script>
<style>
#container {
width: 360px;
min-height: 100px;
background-color: beige;
position: absolute;
left: 50%;
top: 10px;
margin-left: -180px;
}
</style>
</head> <body>
<div id="container">
<div>
图书编码:<input type="text" name="code" id="code">
<input type="button" value="query" id="btn">
</div>
<div id="info"></div> </div>
</body> </html>

2、ajax API

$.ajax中也可以传错误的回调:

error:function(data){
return console.dir(data)
}

3、$.ajax自行封装

function ajax(obj) {
//默认参数
var defaults = {
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
console.log(data)
}
}
//处理形参,进行覆盖
for (let key in obj) {
defaults[key] = obj[key]
}
//创建对象
var xhr = null
//兼容处理
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//把对象形式对的参数转换为字符串形式的参数
var param = ''
for (let attr in obj.data) {
param += attr + '=' + obj.data[attr] + '&'
}
if (param) {
param = param.substring(0, param.length - 1)
}
//处理get请求参数及中文乱码问题
if (defaults.type === 'get') {
defaults.url += '?' + encodeURI(param)
}
//准备发送,设置发送的参数
xhr.open(defaults.type, defaults.url, defaults.async)
//处理post请求并设置请求头
var data=null
if(defaults.type==='post'){
data=param
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded")
}
xhr.send(data)
//处理同步情求,不执行回调函数
if(defaults.async){
return xhr.responseText//不用传回调函数
}
//设置回调函数
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText
if(defaults.dataType=='json'){
data=JSON.parse(data)
}
obj.success(data)
// console.log('ok')
}
}
}
}

4、ajax跨域

1)

跨域是非常常见的

2)一般解决方案:jsonp

开发接口简单,不存在兼容性问题

其他方案有:

拦截跨源请求:同源策略禁止读取位于 http://over.com/data.php 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')

3)jsonp原理解析:

①静态script标签的 src属性进行跨域请求(不常用)

如果返回的是纯数据,无法通过js获取响应的数据(如 echo '123')

可以请求js文件也可以请求php文件。不利于url传参,必须保证加载的顺序

标签内加asnyc属性后将无法获得响应数据,是异步加载。默认

情况下时同步加载

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://over.com/data.php"></script>
<script>
console.log(data)
</script>
</head>
<body>
<h1>你好</h1>
</body>
</html>

②动态创建script标签,通过标签的src属性发送请求

异步的

jsonp的本质:通过jsonp访问一个url地址,所返回的内容是一个函数调用,并且通过函数调用

传递一些参数

<?php
$arr=array("name"=>"cc","age"=>"14");
echo 'foo('.json_encode($arr).')';
?>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script>
var script=document.createElement('script')
script.src='http://over.com/data.php'
var head=$('head')[0]
head.appendChild(script)
function foo(data){
console.log(data)
}
</script>
</head> <body>
<h1>你好</h1>
</body> </html>

上述代码中foo必须写死,不太灵活

下面改进:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script>
var script=document.createElement('script')
script.src='http://over.com/data.php?callback=func'
var head=$('head')[0]
head.appendChild(script)
function func(data){
console.log(data)
}
</script>
</head> <body>
<h1>你好</h1>
</body> </html>

4、jq解决跨域问题

$.ajax仍然支持跨域

经常会发生即使状态码是200也不能进入正确回调函数的情况

<?php
$cb=$_GET['cb'];
echo $cb.'('.'"hello"'.')';
?>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../ajax/ajax.js"></script>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script>
var my$=(id)=>{
return document.getElementById(id)
}
$(()=>{
my$('btn').addEventListener('click',()=>{
$.ajax({
type:'get',
dataType:'jsonp',
jsonp:'cb',//自定义参数名字(默认callback),
//这里的名字指的是等号前面的键,后端根据这个键获取方法名
jsonpCallback:'abc',//这个值是自定义回调函数的名字,就是=后面的值
url:'http://over.com/data.php',
success:(data)=>{
console.log(data)
}
})
}
)
})
</script>
</head> <body>
<input type="button" id="btn" value="submit">
</body> </html>

5、兼容一般处理与跨域的自封装ajax方法

function ajax(obj) {
// 默认参数
var defaults = {
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
console.log(data)
}
}
// 处理形参,传递参数的时候就覆盖默认参数,不传递就使用默认参数
for (var key in obj) {
defaults[key] = obj[key];
}
if (defaults.dataType == 'jsonp') {
ajax4jsonp(defaults)
} else {
ajax4json(defaults)
} function ajax4json(defaults) {
// 1、创建XMLHttpRequest对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 把对象形式的参数转化为字符串形式的参数
/*
{username:'zhangsan','password':123}
转换为
username=zhangsan&password=123
*/
var param = '';
for (var attr in obj.data) {
param += attr + '=' + obj.data[attr] + '&';
}
if (param) {
param = param.substring(0, param.length - 1);
}
// 处理get请求参数并且处理中文乱码问题
if (defaults.type == 'get') {
defaults.url += '?' + encodeURI(param);
}
// 2、准备发送(设置发送的参数)
xhr.open(defaults.type, defaults.url, defaults.async);
// 处理post请求参数并且设置请求头信息(必须设置)
var data = null;
if (defaults.type == 'post') {
data = param;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
// 3、执行发送动作
xhr.send(data);
// 处理同步请求,不会调用回调函数
if (!defaults.async) {
if (defaults.dataType == 'json') {
return JSON.parse(xhr.responseText);
} else {
return xhr.responseText;
}
}
// 4、指定回调函数(处理服务器响应数据)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
if (defaults.dataType == 'json') {
// data = eval("("+ data +")");
data = JSON.parse(data);
}
defaults.success(data);
}
}
} } } function ajax4jsonp(defaults) {
var param = ''
for (var attr in defaults.data) {
param += attr + "=" + defaults.data[attr] + '&'
}
if (param) {
param = param.substring(0, param.length - 1)
param = '&' + param
} var cbName = "jQuery" + ("3.3.1" + Math.random()).replace(/\D/g, "") + '_' + (new Date().getTime())
if (defaults.jsonpCallback) {
console.log('ok')
cbName = defaults.jsonpCallback
}
//回调函数
window[cbName] = function (data) {
defaults.success(data)
}
var script = doc.createElement('script')
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param
var head=document.getElementsByTagName('head')[0]
head.appendChild(script) }

8、搜索联想案例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#container{
width: 400px;
min-height: 300px;
background-color: lightgreen;
margin: auto;
text-align: center;
padding: 10px;
}
#container ul{
margin: 0;
}
#container li{
list-style: none;
background-color: lightGray;
text-align: left;
padding-left: 45px;
height: 25px;
line-height: 25px;
cursor: pointer; }
</style>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#keyword").keyup(function(){
var kw = $(this).val();
$.ajax({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
jsonp:'cb',
data:{wd:kw},
dataType:'jsonp',
success:function(data){
var sug = data.s;
var tag = '<ul>';
$.each(sug,function(i,e){
tag += '<li>'+e+'</li>';
});
tag += '</ul>';
$("#info").html(tag);
$("#info").find('li').hover(function(){
$(this).css('backgroundColor','lightblue');
},function(){
$(this).css('backgroundColor','lightgray');
});
}
});
});
});
</script>
</head>
<body>
<div id="container">
<input type="text" name="keyword" id="keyword">
<input type="button" value="搜索" id="query">
<div id="info"></div>
</div>
</body>
</html>

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

readyState

0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了

ajax冲刺03的更多相关文章

  1. Ajax全解

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 我们先来看一些简单的方法,这些方法都是对jQuery.ajax( ...

  2. MSCRM 通过Ajax调用WCF服务

    Call WCF Service from Dynamics CRM using AJAX A couple of days back, I had one of my ex-colleagues c ...

  3. 黑马eesy_15 Vue:03.生命周期与ajax异步请求

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...

  4. Ajax的封装03

    一.Ajax   1.原理:基于http协议的     内置对象:XMLHttpRequest 发起请求 那会相应     步骤: var xhr=new XMLHttpRequest(); // 请 ...

  5. no-jquery 03 Ajax

    Ajax Requests GETting var xhr = new XMLHttpRequest(); xhr.open('GET', encodeURI('myservice/username? ...

  6. PHP. 03 .ajax传输XML、 ajax传输json、封装

    XML简介 XML 指可扩展标记语言 EXtensible Markup Language .射击的时候是用来船体数据的,虽然格式跟HTML类似 xml示例 <?xml version=&quo ...

  7. 2019.03.24 Ajax

    也还是会用到jquery中的Ajax请i求 所以第一还是引入jQuery包   可以去网上搜腾讯网静态资源库 然后引入包    Ajax还是异步处理  处理堵塞问题  import time 就可以了 ...

  8. 【03】AJAX 向服务器发送请求

    AJAX 向服务器发送请求   创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...

  9. 第03组 Beta冲刺(1/4)

    队名:不等式方程组 组长博客 作业博客 团队项目进度 组员一:张逸杰(组长) 过去两天完成的任务: 文字/口头描述: 制定了初步的项目计划,并开始学习一些推荐.搜索类算法 GitHub签入纪录: 暂无 ...

随机推荐

  1. 【译】理解JavaScript中的柯里化

    译文开始 函数式编程是一种编程风格,这种编程风格就是试图将传递函数作为参数(即将作为回调函数)和返回一个函数,但没有函数副作用(函数副作用即会改变程序的状态). 有很多语言采用这种编程风格,其中包括J ...

  2. ASP.NET Core 2.0 新功能汇总

    前言 ASP.NET Core 的变化和发展速度是飞快的,当你发现你还没有掌握 ASP.NET Core 1.0 的时候, 2.0 已经快要发布了,目前 2.0 处于 Preview 1 版本,意味着 ...

  3. MySQL主从数据同步延时分析

    一.MySQL数据库主从同步延迟                                                              要了解MySQL数据库主从同步延迟原理,我们 ...

  4. 【转】Android 模拟器横屏竖屏切换设置

    http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04   来源:设计与开发   ...

  5. Flink的广播变量

    Flink支持广播变量,就是将数据广播到具体的taskmanager上,数据存储在内存中,这样可以减缓大量的shuffle操作: 比如在数据join阶段,不可避免的就是大量的shuffle操作,我们可 ...

  6. Fiddler教程--简介

    1.开发环境host配置 自己修改系统的host来回挺麻烦的 2.前后的接口调试 3.线上bugfix 4.性能分析和优化 5.等等... 工作原理 一个代理服务器 地址改为 127.0.0.1:88 ...

  7. BZOJ2120 数颜色 莫队 带修莫队

    原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ2120.html 题目传送门 - BZOJ2120 题意 给定一个长度为 $n$ 的序列 $a$ ,有 ...

  8. Linux下C语言的socket网络编程

    关于详细的服务器建立的步骤以及相关的socket套接字的知识我已经在python socket编程的文章中提到过了,大家可以参看那一篇博客来历接socket套接字编程的内容,由于要是用C相关的API所 ...

  9. NN:神经网络算法进阶优化法,进一步提高手写数字识别的准确率—Jason niu

    上一篇文章,比较了三种算法实现对手写数字识别,其中,SVM和神经网络算法表现非常好准确率都在90%以上,本文章进一步探讨对神经网络算法优化,进一步提高准确率,通过测试发现,准确率提高了很多. 首先,改 ...

  10. 【python】异步IO

    No1: 协程看上去也是子程序,但执行过程中,在子程序内部可中断,然后转而执行别的子程序,在适当的时候再返回来接着执行. 优势: 1.最大的优势就是协程极高的执行效率.因为子程序切换不是线程切换,而是 ...