Questions about anything?
Here's an ajax demo for us to look at.
And let's also use the Firefox Developer Tools to look at (a) the web requests in the Network tab, including their headers, and (b) use the debugger to put a breakpoint into the javascript.
I've asked you to do something along these lines for this week's assignment - specifics are up to you.
Topics related to all this that we may want discuss :
In a typical client-server application, the client makes AJAX requests for data to the same domain name. The "cross-origin" discussion relates to the security issues around responding asking for and responding to requests for data from other sites.
Unlike the human-user browser-to-website examples we've been looking at so far, AJAX web calls are machine-to-machine transactions, using the same web interface that we've been discussing.
I'll walk you through my demo, and we'll see where the conversation goes.
Last week we looked at "pure vanilla js" ... which has been getting more powerful and convenient over time, for example with promises, async, await, the "fat arrow function", and other language features.
Next week we'll discuss "frameworks" - opinionated client side environments that have their own ideas and structures, things like React or Svelte .
This week I invite you to read about and explore some "libraries" that fall between those two extremes, which can add functionality to your client side js without taking over, for tasks like fetching remote websites (jquery, axios) or widgets (jquery, bootstrap), doing functional programming (underscore, lodash) or handling dates (moment) or whatever.
See for example stateofjs.com - other tools .
This would be a good time to understand HTTP better. Issuing some requests from the command line with "curl -v" is one way to see the headers.
Here are a couple of examples to discuss.
$ curl -v http://cs.bennington.college
* Trying 96.126.108.24...
* TCP_NODELAY set
* Connected to cs.bennington.college (96.126.108.24) port 80 (#0)
> GET / HTTP/1.1
> Host: cs.bennington.college
> User-Agent: curl/7.64.1
> Accept: */*
>
< HTTP/1.1 301 Moved Permanently
< Server: nginx/1.14.2
< Date: Mon, 27 Sep 2021 03:27:19 GMT
< Content-Type: text/html
< Content-Length: 185
< Connection: keep-alive
< Location: https://cs.bennington.college/
<
<html>
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<center><h1>301 Moved Permanently</h1></center>
<hr><center>nginx/1.14.2</center>
</body>
</html>
* Connection #0 to host cs.bennington.college left intact
* Closing connection 0
$ curl -v https://api.publicapis.org/categories
* Trying 138.197.231.124...
* TCP_NODELAY set
* Connected to api.publicapis.org (138.197.231.124) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully set certificate verify locations:
* CAfile: /etc/ssl/cert.pem
CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-ECDSA-AES256-GCM-SHA384
* ALPN, server accepted to use h2
* Server certificate:
* subject: CN=api.publicapis.org
* start date: Sep 23 15:07:10 2021 GMT
* expire date: Dec 22 15:07:09 2021 GMT
* subjectAltName: host "api.publicapis.org" matched cert's "api.publicapis.org"
* issuer: C=US; O=Let's Encrypt; CN=R3
* SSL certificate verify ok.
* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* Using Stream ID: 1 (easy handle 0x7f955e809200)
> GET /categories HTTP/2
> Host: api.publicapis.org
> User-Agent: curl/7.64.1
> Accept: */*
>
* Connection state changed (MAX_CONCURRENT_STREAMS == 250)!
< HTTP/2 200
< access-control-allow-origin: *
< content-type: application/json
< date: Mon, 27 Sep 2021 03:30:45 GMT
< server: Caddy
< x-rate-limit-duration: 1
< x-rate-limit-limit: 10.00
< x-rate-limit-request-forwarded-for: 73.253.39.32
< x-rate-limit-request-remote-addr: 172.17.0.1:53896
< content-length: 687
<
["Animals","Anime","Anti-Malware","Art \u0026 Design","Authentication","Books","Business","Calendar","Cloud Storage \u0026 File Sharing","Continuous Integration","Cryptocurrency","Currency Exchange","Data Validation","Development","Dictionaries","Documents \u0026 Productivity","Environment","Events","Finance","Food \u0026 Drink","Games \u0026 Comics","Geocoding","Government","Health","Jobs","Machine Learning","Music","News","Open Data","Open Source Projects","Patent","Personality","Phone","Photography","Science \u0026 Math","Security","Shopping","Social","Sports \u0026 Fitness","Test Data","Text Analysis","Tracking","Transportation","URL Shorteners","Vehicle","Video","Weather"]
* Connection #0 to host api.publicapis.org left intact
* Closing connection 0